@activecollab/components 2.0.94 → 2.0.95

package/dist/esm/components/Input/Styles.js

@@ -4,12 +4,12 @@ import { FontStyle } from "../FontStyle";
 export const StyledInputWrapper = styled.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && css(["border-color:var(--red-alert);"]));
+})(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, props => props.$mode === "outlined" && css(["background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;"]), props => props.$size === "small" && css(["border-radius:6px;height:24px;"]), props => props.$size === "big" && css(["height:40px;"]), props => props.$size === "biggest" && css(["height:48px;"]), props => props.$disabled && css(["cursor:default;opacity:50%;"]), props => !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]), props => !props.$disabled && props.$invalid && props.$mode === "outlined" && css(["border-color:var(--red-alert);"]));
 StyledInputWrapper.displayName = "StyledInputWrapper";
 export const StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-1"
-})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", ""], props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align));
+})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], props => props.$size === "big" && css(["font-size:1rem;"]), props => props.$size === "biggest" && css(["font-size:1.25rem;font-weight:700;"]), props => props.disabled && css(["cursor:default;"]), props => props.$loading && css(["cursor:progress;"]), props => props.align && css(["text-align:", ";"], props.align), props => props.$mode === "flat" && props.$invalid && css(["color:var(--red-alert);"]));
 StyledInput.displayName = "StyledInput";
 export const StyledPasswordIndicatorWrapper = styled.div.withConfig({
   displayName: "Styles__StyledPasswordIndicatorWrapper",

package/dist/esm/components/Input/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n  background-color: var(--input-background-color);\n  border-color: var(--color-theme-500);\n  border-radius: 8px;\n  border-style: solid;\n  border-width: 1px;\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","withConfig","displayName","componentId","props","$mode","$size","$disabled","$invalid","StyledInput","input","disabled","$loading","align","StyledPasswordIndicatorWrapper","StyledPasswordIndicator","$strength","$index","StyledInputSelectTrigger"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputProps } from \"./Input\";\nimport { InputMode, InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n  $mode?: InputMode;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  align-items: center;\n\n  cursor: text;\n  display: flex;\n  height: 32px;\n  padding-block: 4px;\n  padding-inline: 4px;\n  transition: all 0.3s ease;\n  width: 360px;\n\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  /* mode styling */\n  ${(props) =>\n    props.$mode === \"outlined\" &&\n    css`\n      background-color: var(--input-background-color);\n      border-color: var(--color-theme-500);\n      border-radius: 8px;\n      border-style: solid;\n      border-width: 1px;\n    `}\n\n\n  ${(props) =>\n    props.$size === \"small\" &&\n    css`\n      border-radius: 6px;\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n    ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      height: 48px;\n    `}\n\n  ${(props) =>\n    props.$disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    !props.$invalid &&\n    css`\n      &:focus-within,\n      &:hover {\n        border-color: var(--color-primary);\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      border-color: var(--red-alert);\n    `}\n`;\n\nStyledInputWrapper.displayName = \"StyledInputWrapper\";\n\ninterface StyledInputProps extends Pick<InputProps, \"align\"> {\n  $size?: InputSize;\n  $loading?: boolean;\n  $mode?: InputMode;\n  $invalid?: boolean;\n}\n\nexport const StyledInput = styled.input<StyledInputProps>`\n  background-color: var(--input-background-color);\n  border: none;\n  color: var(--color-theme-900);\n  /* @TODO: Prebaciti velicine fontova, weight, razmake, itd... u naše varijable. */\n  font-size: 0.875rem;\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  margin-block: 0;\n  margin-inline: 4px;\n  outline: none;\n  padding: 0;\n  width: 100%;\n\n  &::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n\n  ${(props) =>\n    props.$size === \"biggest\" &&\n    css`\n      font-size: 1.25rem;\n      font-weight: 700;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n  ${(props) =>\n    props.align &&\n    css`\n      text-align: ${props.align};\n    `}\n\n    ${(props) =>\n    props.$mode === \"flat\" &&\n    props.$invalid &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n\nexport const StyledPasswordIndicatorWrapper = styled.div`\n  display: flex;\n  gap: 2px;\n  margin-top: 6px;\n  margin-bottom: 4px;\n`;\n\nStyledPasswordIndicatorWrapper.displayName = \"StyledPasswordIndicatorWrapper\";\n\nexport const StyledPasswordIndicator = styled.div<{\n  $strength: number;\n  $index: number;\n}>`\n  width: 100%;\n  height: 4px;\n  border-radius: 6px;\n  background-color: ${(props) => {\n    const { $strength, $index } = props;\n\n    if ($strength === 0) {\n      return \"var(--color-theme-300)\";\n    } else if ($strength === 1) {\n      return $index === 0 ? \"var(--red-alert)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 2) {\n      return $index < 2 ? \"var(--color-orange)\" : \"var(--color-theme-300)\";\n    } else if ($strength === 3) {\n      return $index < 3 ? \"var(--color-blue-sky)\" : \"var(--color-theme-300)\";\n    } else {\n      return \"var(--color-sucess-green)\";\n    }\n  }};\n`;\n\nStyledPasswordIndicator.displayName = \"StyledPasswordIndicator\";\n\nexport const StyledInputSelectTrigger = styled.div<{\n  $size: string;\n  $disabled: boolean;\n}>`\n  display: flex;\n  gap: 6px;\n  align-items: center;\n  margin-right: 2px;\n  margin-left: 8px;\n  color: var(--color-theme-700);\n  font-weight: 400;\n  letter-spacing: 0.02em;\n  font-size: 0.875rem;\n  flex-shrink: 0;\n  cursor: ${(props) => {\n    if (props.$disabled) {\n      return \"unset\";\n    }\n    return \"pointer\";\n  }};\n\n  pointer-events: ${(props) => {\n    if (props.$disabled) {\n      return \"none\";\n    }\n    return \"unset\";\n  }};\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      font-size: 1rem;\n    `}\n`;\n\nStyledInputSelectTrigger.displayName = \"StyledInputSelectTrigger\";\n"],"mappings":"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"}

package/dist/esm/components/Input/types.d.ts

@@ -1,2 +1,3 @@
 export type InputSize = "small" | "regular" | "big" | "biggest";
+export type InputMode = "outlined" | "flat";
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/Input/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,SAAS,CAAC;AAChE,MAAM,MAAM,SAAS,GAAG,UAAU,GAAG,MAAM,CAAC"}

package/dist/esm/components/Input/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\n"],"mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/components/Input/types.ts"],"sourcesContent":["export type InputSize = \"small\" | \"regular\" | \"big\" | \"biggest\";\nexport type InputMode = \"outlined\" | \"flat\";\n"],"mappings":""}

package/dist/esm/components/Textarea/Styles.d.ts

@@ -1,6 +1,8 @@
+import { InputMode } from "../Input/types";
 interface StyledTextareaProps {
     disabled: boolean;
     $invalid: boolean;
+    $mode: InputMode;
 }
 export declare const StyledTextarea: import("styled-components").StyledComponent<"textarea", any, StyledTextareaProps, never>;
 export {};

package/dist/esm/components/Textarea/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAMA,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,0FA+C1B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Styles.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0FAgE1B,CAAC"}

package/dist/esm/components/Textarea/Styles.js

@@ -4,7 +4,7 @@ import { FontStyle } from "../FontStyle";
 export const StyledTextarea = styled.textarea.withConfig({
   displayName: "Styles__StyledTextarea",
   componentId: "sc-m6jqw8-0"
-})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
+})(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
   "fontSize": "0.875rem"
 }, {
   "color": "var(--color-theme-900)"
@@ -16,15 +16,15 @@ export const StyledTextarea = styled.textarea.withConfig({
   "fontWeight": "400"
 }, {
   "borderColor": "var(--color-theme-500)"
-}, FontStyle, BoxSizingStyle, props => props.disabled && css(["", ""], {
+}, FontStyle, BoxSizingStyle, props => props.$mode === "flat" && css(["border:none;background-color:transparent;"]), props => props.disabled && css(["", ""], {
   "cursor": "not-allowed",
   "opacity": "0.5"
-}), props => !props.disabled && !props.$invalid && css(["&:active,&:focus,&:hover{", "}"], {
+}), props => !props.disabled && !props.$invalid && props.$mode === "outlined" && css(["&:active,&:focus,&:hover{", "}"], {
   "borderColor": "var(--color-primary)"
 }), {
   "color": "var(--color-theme-transparent-500)"
-}, props => !props.disabled && props.$invalid && css(["", ""], {
+}, props => !props.disabled && props.$invalid && props.$mode === "outlined" && css(["", ""], {
   "borderColor": "var(--red-alert)"
-}));
+}), props => !props.disabled && props.$invalid && props.$mode === "flat" && css(["color:var(--red-alert);"]));
 StyledTextarea.displayName = "StyledTextarea";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Textarea/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n  $invalid: boolean;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px 8px 6px 8px;\n  height: auto;\n  background-color: var(--input-background-color);\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  outline: none;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    !props.$invalid &&\n    css`\n      &:active,\n      &:focus,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,8RACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAGjB;EAAA;AAAoB,CAAC,EASvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,QAAQ,IACdT,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACf,CAACD,KAAK,CAACE,QAAQ,IACfV,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACC,QAAQ,IACfD,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledTextarea","textarea","withConfig","displayName","componentId","props","$mode","disabled","$invalid"],"sources":["../../../../src/components/Textarea/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\n\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { InputMode } from \"../Input/types\";\n\ninterface StyledTextareaProps {\n  disabled: boolean;\n  $invalid: boolean;\n  $mode: InputMode;\n}\n\nexport const StyledTextarea = styled.textarea<StyledTextareaProps>`\n  ${tw`tw-text-body-2`}\n  ${tw`tw-text-theme-900`}\n  ${tw`tw-leading-regular`}\n  ${tw`tw-tracking-regular`}\n  ${tw`tw-font-regular`}\n  border-width: 1px;\n  border-style: solid;\n  background-color: var(--input-background-color);\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px 8px 6px 8px;\n  height: auto;\n  transition: all 0.3s ease;\n  width: 360px;\n  min-height: 90px;\n  outline: none;\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${(props) =>\n    props.$mode === \"flat\" &&\n    css`\n      border: none;\n      background-color: transparent;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed tw-opacity-50`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    !props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      &:active,\n      &:focus,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    props.$mode === \"outlined\" &&\n    css`\n      ${tw`tw-border-alert`}\n    `}\n\n  ${(props) =>\n    !props.disabled &&\n    props.$invalid &&\n    props.$mode === \"flat\" &&\n    css`\n      color: var(--red-alert);\n    `}\n`;\n\nStyledTextarea.displayName = \"StyledTextarea\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,MAAMC,cAAc,GAAGJ,MAAM,CAACK,QAAQ,CAAAC,UAAA;EAAAC,WAAA;EAAAC,WAAA;AAAA,wSACvC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EAIjB;EAAA;AAAoB,CAAC,EAQvBL,SAAS,EACTD,cAAc,EAEbO,KAAK,IACNA,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,+CAGF,EAEAQ,KAAK,IACNA,KAAK,CAACE,QAAQ,IACdV,GAAG,WACG;EAAA;EAAA;AAAoC,CAAC,CAC1C,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACf,CAACF,KAAK,CAACG,QAAQ,IACfH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,qCAIK;EAAA;AAAkB,CAAC,CAE1B,EAGG;EAAA;AAA8B,CAAC,EAGlCQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,UAAU,IAC1BT,GAAG,WACG;EAAA;AAAgB,CAAC,CACtB,EAEAQ,KAAK,IACN,CAACA,KAAK,CAACE,QAAQ,IACfF,KAAK,CAACG,QAAQ,IACdH,KAAK,CAACC,KAAK,KAAK,MAAM,IACtBT,GAAG,6BAEF,CACJ;AAEDG,cAAc,CAACG,WAAW,GAAG,gBAAgB"}

package/dist/esm/components/Textarea/Textarea.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
+import { InputMode } from "../Input/types";
 export interface TextareaProps {
     invalid?: boolean;
+    mode?: InputMode;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, "invalid"> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & Omit<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref">, keyof TextareaProps> & React.RefAttributes<HTMLTextAreaElement>>;
 //# sourceMappingURL=Textarea.d.ts.map

package/dist/esm/components/Textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAM/C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,QAAQ,2NAyBpB,CAAC"}
+{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../../src/components/Textarea/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAK/C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,qOA4BpB,CAAC"}

package/dist/esm/components/Textarea/Textarea.js

@@ -7,12 +7,15 @@ export const Textarea = /*#__PURE__*/forwardRef((_ref, ref) => {
     className,
     disabled = false,
     invalid = false,
+    mode = "outlined",
     ...rest
   } = _ref;
   return /*#__PURE__*/React.createElement(StyledTextarea, _extends({}, rest, {
     $invalid: invalid,
     ref: ref,
+    $mode: mode,
     disabled: disabled,
+    "aria-invalid": invalid,
     className: classnames("c-textarea", {
       "c-textarea__disabled": disabled
     }, className)

package/dist/esm/components/Textarea/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","rest","createElement","_extends","$invalid","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\n\nexport interface TextareaProps {\n  invalid?: boolean;\n}\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      invalid = false,\n      ...rest\n    }: TextareaProps &\n      Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        $invalid={invalid}\n        ref={ref}\n        disabled={disabled}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAMzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EAQEC,GAAgD,KAC7C;EAAA,IARH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACf,GAAGC;EAEiE,CAAC,GAAAL,IAAA;EAGvE,oBACEL,KAAA,CAAAW,aAAA,CAACR,cAAc,EAAAS,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEJ,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTE,QAAQ,EAAEA,QAAS;IACnBD,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACU,WAAW,GAAG,UAAU"}
+{"version":3,"file":"Textarea.js","names":["React","forwardRef","classnames","StyledTextarea","Textarea","_ref","ref","className","disabled","invalid","mode","rest","createElement","_extends","$invalid","$mode","displayName"],"sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import React, { forwardRef, Ref } from \"react\";\n\nimport classnames from \"classnames\";\n\nimport { StyledTextarea } from \"./Styles\";\nimport { InputMode } from \"../Input/types\";\n\nexport interface TextareaProps {\n  invalid?: boolean;\n  mode?: InputMode;\n}\n\nexport const Textarea = forwardRef(\n  (\n    {\n      className,\n      disabled = false,\n      invalid = false,\n      mode = \"outlined\",\n      ...rest\n    }: TextareaProps &\n      Omit<React.ComponentPropsWithoutRef<\"textarea\">, keyof TextareaProps>,\n    ref: Ref<HTMLTextAreaElement> | null | undefined\n  ) => {\n    return (\n      <StyledTextarea\n        {...rest}\n        $invalid={invalid}\n        ref={ref}\n        $mode={mode}\n        disabled={disabled}\n        aria-invalid={invalid}\n        className={classnames(\n          \"c-textarea\",\n          { \"c-textarea__disabled\": disabled },\n          className\n        )}\n      />\n    );\n  }\n);\n\nTextarea.displayName = \"Textarea\";\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAa,OAAO;AAE9C,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,UAAU;AAQzC,OAAO,MAAMC,QAAQ,gBAAGH,UAAU,CAChC,CAAAI,IAAA,EASEC,GAAgD,KAC7C;EAAA,IATH;IACEC,SAAS;IACTC,QAAQ,GAAG,KAAK;IAChBC,OAAO,GAAG,KAAK;IACfC,IAAI,GAAG,UAAU;IACjB,GAAGC;EAEiE,CAAC,GAAAN,IAAA;EAGvE,oBACEL,KAAA,CAAAY,aAAA,CAACT,cAAc,EAAAU,QAAA,KACTF,IAAI;IACRG,QAAQ,EAAEL,OAAQ;IAClBH,GAAG,EAAEA,GAAI;IACTS,KAAK,EAAEL,IAAK;IACZF,QAAQ,EAAEA,QAAS;IACnB,gBAAcC,OAAQ;IACtBF,SAAS,EAAEL,UAAU,CACnB,YAAY,EACZ;MAAE,sBAAsB,EAAEM;IAAS,CAAC,EACpCD,SACF;EAAE,EACH,CAAC;AAEN,CACF,CAAC;AAEDH,QAAQ,CAACY,WAAW,GAAG,UAAU"}

package/dist/index.js

@@ -11527,7 +11527,9 @@
   var StyledInputWrapper = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledInputWrapper",
     componentId: "sc-ce8kcp-0"
-  })(["align-items:center;background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["align-items:center;cursor:text;display:flex;height:32px;padding-block:4px;padding-inline:4px;transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+    return props.$mode === "outlined" && styled.css(["background-color:var(--input-background-color);border-color:var(--color-theme-500);border-radius:8px;border-style:solid;border-width:1px;"]);
+  }, function (props) {
     return props.$size === "small" && styled.css(["border-radius:6px;height:24px;"]);
   }, function (props) {
     return props.$size === "big" && styled.css(["height:40px;"]);
@@ -11538,13 +11540,13 @@
   }, function (props) {
     return !props.$disabled && !props.$invalid && styled.css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]);
   }, function (props) {
-    return !props.$disabled && props.$invalid && styled.css(["border-color:var(--red-alert);"]);
+    return !props.$disabled && props.$invalid && props.$mode === "outlined" && styled.css(["border-color:var(--red-alert);"]);
   });
   StyledInputWrapper.displayName = "StyledInputWrapper";
   var StyledInput$2 = styled__default["default"].input.withConfig({
     displayName: "Styles__StyledInput",
     componentId: "sc-ce8kcp-1"
-  })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", ""], function (props) {
+  })(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;margin-block:0;margin-inline:4px;outline:none;padding:0;width:100%;&::placeholder{color:var(--color-theme-transparent-500);}", " ", " ", " ", " ", " ", ""], function (props) {
     return props.$size === "big" && styled.css(["font-size:1rem;"]);
   }, function (props) {
     return props.$size === "biggest" && styled.css(["font-size:1.25rem;font-weight:700;"]);
@@ -11554,6 +11556,8 @@
     return props.$loading && styled.css(["cursor:progress;"]);
   }, function (props) {
     return props.align && styled.css(["text-align:", ";"], props.align);
+  }, function (props) {
+    return props.$mode === "flat" && props.$invalid && styled.css(["color:var(--red-alert);"]);
   });
   StyledInput$2.displayName = "StyledInput";
   var StyledPasswordIndicatorWrapper = styled__default["default"].div.withConfig({
@@ -11598,7 +11602,7 @@
   });
   StyledInputSelectTrigger.displayName = "StyledInputSelectTrigger";
 
-  var _excluded$R = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick"];
+  var _excluded$R = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "mode"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -11615,6 +11619,8 @@
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
       wrapperClick = _ref.wrapperClick,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$R);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
@@ -11627,6 +11633,7 @@
       $size: size,
       $invalid: invalid,
       $disabled: disabled,
+      $mode: mode,
       style: style,
       className: classNames__default["default"]("c-input-wrapper", className),
       onClick: handleWrapperClick,
@@ -11638,6 +11645,8 @@
       disabled: disabled,
       className: "c-input",
       "aria-invalid": invalid,
+      $invalid: invalid,
+      $mode: mode,
       "data-form-type": "other"
     }, rest)), endAdornment);
   });
@@ -14093,7 +14102,7 @@
   var StyledTextarea = styled__default["default"].textarea.withConfig({
     displayName: "Styles__StyledTextarea",
     componentId: "sc-m6jqw8-0"
-  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " &::placeholder{", "}", ""], {
+  })(["", " ", " ", " ", " ", " border-width:1px;border-style:solid;background-color:var(--input-background-color);", " border-radius:8px;padding:4px 8px 6px 8px;height:auto;transition:all 0.3s ease;width:360px;min-height:90px;outline:none;", " ", " ", " ", " ", " &::placeholder{", "}", " ", ""], {
     "fontSize": "0.875rem"
   }, {
     "color": "var(--color-theme-900)"
@@ -14106,35 +14115,43 @@
   }, {
     "borderColor": "var(--color-theme-500)"
   }, FontStyle, BoxSizingStyle, function (props) {
+    return props.$mode === "flat" && styled.css(["border:none;background-color:transparent;"]);
+  }, function (props) {
     return props.disabled && styled.css(["", ""], {
       "cursor": "not-allowed",
       "opacity": "0.5"
     });
   }, function (props) {
-    return !props.disabled && !props.$invalid && styled.css(["&:active,&:focus,&:hover{", "}"], {
+    return !props.disabled && !props.$invalid && props.$mode === "outlined" && styled.css(["&:active,&:focus,&:hover{", "}"], {
       "borderColor": "var(--color-primary)"
     });
   }, {
     "color": "var(--color-theme-transparent-500)"
   }, function (props) {
-    return !props.disabled && props.$invalid && styled.css(["", ""], {
+    return !props.disabled && props.$invalid && props.$mode === "outlined" && styled.css(["", ""], {
       "borderColor": "var(--red-alert)"
     });
+  }, function (props) {
+    return !props.disabled && props.$invalid && props.$mode === "flat" && styled.css(["color:var(--red-alert);"]);
   });
   StyledTextarea.displayName = "StyledTextarea";
 
-  var _excluded$F = ["className", "disabled", "invalid"];
+  var _excluded$F = ["className", "disabled", "invalid", "mode"];
   var Textarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var className = _ref.className,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$invalid = _ref.invalid,
       invalid = _ref$invalid === void 0 ? false : _ref$invalid,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$F);
     return /*#__PURE__*/React__default["default"].createElement(StyledTextarea, _extends({}, rest, {
       $invalid: invalid,
       ref: ref,
+      $mode: mode,
       disabled: disabled,
+      "aria-invalid": invalid,
       className: classNames__default["default"]("c-textarea", {
         "c-textarea__disabled": disabled
       }, className)
@@ -14462,7 +14479,7 @@
   })(["white-space:pre-wrap;overflow-wrap:break-word;resize:none;"]);
   StyledAutoResizeTextarea.displayName = "StyledAutoResizeTextarea";
 
-  var _excluded$B = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value"];
+  var _excluded$B = ["minRows", "maxRows", "lineHeight", "onChange", "className", "preventNewRowOnEnter", "cursorAtTextEnd", "onKeyDown", "value", "mode"];
   var AutoResizeTextarea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     var _ref$minRows = _ref.minRows,
       minRows = _ref$minRows === void 0 ? 1 : _ref$minRows,
@@ -14478,6 +14495,8 @@
       cursorAtTextEnd = _ref$cursorAtTextEnd === void 0 ? false : _ref$cursorAtTextEnd,
       onKeyDown = _ref.onKeyDown,
       value = _ref.value,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? "outlined" : _ref$mode,
       rest = _objectWithoutProperties(_ref, _excluded$B);
     var innerRef = React.useRef(null);
     var _useState = React.useState(minRows),
@@ -14525,6 +14544,7 @@
       onKeyDown: handleTextAreaKeyDown,
       onFocus: handleFocus,
       rows: rows,
+      mode: mode,
       className: classNames__default["default"]("c-autoresizetextarea", className),
       style: {
         minHeight: "".concat(lineHeight, "px"),