@activecollab/components 1.0.392 → 1.0.394

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","inputClassName","wrapperClick","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n  inputClassName?: string;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      inputClassName,\n      wrapperClick,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className={classnames(\"c-input\", inputClassName)}\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAgB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACTC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BN,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEN,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,SAAS,EAAEgB,cAAc,CAAE;IACjD,gBAAcJ,OAAQ;IACtB,kBAAe;EAAO,GAClBM,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}
+{"version":3,"file":"Input.js","names":["React","useCallback","useRef","classnames","StyledInput","StyledInputWrapper","useForkRef","Input","forwardRef","ref","className","style","type","disabled","size","invalid","startAdornment","endAdornment","wrapRef","wrapperClick","typographyProps","rest","intInputRef","handleRef","handleWrapperClick","current","focus","displayName"],"sources":["../../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  Ref,\n  useCallback,\n  useRef,\n  InputHTMLAttributes,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { StyledInput, StyledInputWrapper } from \"./Styles\";\nimport useForkRef from \"../../utils/useForkRef\";\nimport { InputSize } from \"./types\";\nimport { ITypographyProps } from \"../Typography/Typography\";\n\ntype InputNativeProps = InputHTMLAttributes<HTMLInputElement>;\n\nexport interface InputProps extends Omit<InputNativeProps, \"size\" | \"ref\"> {\n  /** Velicina inputa koja definse font-size i border radius */\n  size?: InputSize;\n  invalid?: boolean;\n  startAdornment?: ReactNode;\n  endAdornment?: ReactNode;\n  wrapRef?: Ref<HTMLDivElement>;\n  wrapperClick?: () => void;\n  typographyProps?: Omit<ITypographyProps, \"size\">;\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  (\n    {\n      className = \"\",\n      style,\n      type = \"text\",\n      disabled = false,\n      size = \"regular\",\n      invalid = false,\n      startAdornment,\n      endAdornment,\n      wrapRef,\n      wrapperClick,\n      typographyProps,\n      ...rest\n    },\n    ref\n  ) => {\n    const intInputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(ref, intInputRef);\n\n    const handleWrapperClick = useCallback(() => {\n      intInputRef.current?.focus();\n      wrapperClick && wrapperClick();\n    }, [wrapperClick]);\n\n    return (\n      <StyledInputWrapper\n        $size={size}\n        $invalid={invalid}\n        $disabled={disabled}\n        style={style}\n        className={classnames(\"c-input-wrapper\", className)}\n        onClick={handleWrapperClick}\n        ref={wrapRef}\n      >\n        {startAdornment}\n        <StyledInput\n          ref={handleRef}\n          type={type}\n          $size={size}\n          disabled={disabled}\n          className=\"c-input\"\n          aria-invalid={invalid}\n          data-form-type=\"other\"\n          {...typographyProps}\n          {...rest}\n        />\n        {endAdornment}\n      </StyledInputWrapper>\n    );\n  }\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAGVC,WAAW,EACXC,MAAM,QAED,OAAO;AACd,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,WAAW,EAAEC,kBAAkB,QAAQ,UAAU;AAC1D,OAAOC,UAAU,MAAM,wBAAwB;AAiB/C,OAAO,IAAMC,KAAK,gBAAGP,KAAK,CAACQ,UAAU,CACnC,gBAeEC,GAAG,EACA;EAAA,0BAdDC,SAAS;IAATA,SAAS,+BAAG,EAAE;IACdC,KAAK,QAALA,KAAK;IAAA,iBACLC,IAAI;IAAJA,IAAI,0BAAG,MAAM;IAAA,qBACbC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,iBAChBC,IAAI;IAAJA,IAAI,0BAAG,SAAS;IAAA,oBAChBC,OAAO;IAAPA,OAAO,6BAAG,KAAK;IACfC,cAAc,QAAdA,cAAc;IACdC,YAAY,QAAZA,YAAY;IACZC,OAAO,QAAPA,OAAO;IACPC,YAAY,QAAZA,YAAY;IACZC,eAAe,QAAfA,eAAe;IACZC,IAAI;EAIT,IAAMC,WAAW,GAAGpB,MAAM,CAAmB,IAAI,CAAC;EAClD,IAAMqB,SAAS,GAAGjB,UAAU,CAACG,GAAG,EAAEa,WAAW,CAAC;EAE9C,IAAME,kBAAkB,GAAGvB,WAAW,CAAC,YAAM;IAAA;IAC3C,wBAAAqB,WAAW,CAACG,OAAO,qBAAnB,qBAAqBC,KAAK,EAAE;IAC5BP,YAAY,IAAIA,YAAY,EAAE;EAChC,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,oBACE,oBAAC,kBAAkB;IACjB,KAAK,EAAEL,IAAK;IACZ,QAAQ,EAAEC,OAAQ;IAClB,SAAS,EAAEF,QAAS;IACpB,KAAK,EAAEF,KAAM;IACb,SAAS,EAAER,UAAU,CAAC,iBAAiB,EAAEO,SAAS,CAAE;IACpD,OAAO,EAAEc,kBAAmB;IAC5B,GAAG,EAAEN;EAAQ,GAEZF,cAAc,eACf,oBAAC,WAAW;IACV,GAAG,EAAEO,SAAU;IACf,IAAI,EAAEX,IAAK;IACX,KAAK,EAAEE,IAAK;IACZ,QAAQ,EAAED,QAAS;IACnB,SAAS,EAAC,SAAS;IACnB,gBAAcE,OAAQ;IACtB,kBAAe;EAAO,GAClBK,eAAe,EACfC,IAAI,EACR,EACDJ,YAAY,CACM;AAEzB,CAAC,CACF;AAEDV,KAAK,CAACoB,WAAW,GAAG,OAAO"}

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

@@ -1,4 +1,5 @@
 import { InputSize } from "./types";
+import { ITypographyProps } from "../Typography/Typography";
 interface StyledInputWrapperProps {
     $size?: InputSize;
     $invalid?: boolean;
@@ -8,6 +9,7 @@ export declare const StyledInputWrapper: import("styled-components").StyledCompo
 interface StyledInputProps {
     $size?: InputSize;
     $loading?: boolean;
+    align?: ITypographyProps["align"];
 }
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, StyledInputProps, never>;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIpC,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,WAAW,oFAyCvB,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5D,UAAU,uBAAuB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,kBAAkB,yFA4D9B,CAAC;AAIF,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,oFAmEvB,CAAC"}

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

@@ -21,7 +21,7 @@ StyledInputWrapper.displayName = "StyledInputWrapper";
 export var 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);}", " ", " ", " ", ""], 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" && css(["font-size:1rem;"]);
 }, function (props) {
   return props.$size === "biggest" && css(["font-size:1.25rem;font-weight:500;"]);
@@ -29,6 +29,14 @@ export var StyledInput = styled.input.withConfig({
   return props.disabled && css(["cursor:default;"]);
 }, function (props) {
   return props.$loading && css(["cursor:progress;"]);
+}, function (props) {
+  return props.align === "left" && css(["text-align:left;"]);
+}, function (props) {
+  return props.align === "right" && css(["text-align:right;"]);
+}, function (props) {
+  return props.align === "center" && css(["text-align:center;"]);
+}, function (props) {
+  return props.align === "justify" && css(["text-align:justify;"]);
 });
 StyledInput.displayName = "StyledInput";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\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 {\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: 500;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAQxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,ySAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}
+{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledInputWrapper","div","props","$size","$disabled","$invalid","displayName","StyledInput","input","disabled","$loading","align"],"sources":["../../../../src/components/Input/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { ITypographyProps } from \"../Typography/Typography\";\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 {\n  $size?: InputSize;\n  $loading?: boolean;\n  align?: ITypographyProps[\"align\"];\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: 500;\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n    `}\n  ${(props) =>\n    props.$loading &&\n    css`\n      cursor: progress;\n    `}\n\n    /* @TODO: Po potrebi dodati jos propertija iz tipografije. */\n\n    ${(props) =>\n    props.align === \"left\" &&\n    css`\n      text-align: left;\n    `}\n\n  ${(props) =>\n    props.align === \"right\" &&\n    css`\n      text-align: right;\n    `}\n\n  ${(props) =>\n    props.align === \"center\" &&\n    css`\n      text-align: center;\n    `}\n    \n  ${(props) =>\n    props.align === \"justify\" &&\n    css`\n      text-align: justify;\n    `}\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AASxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,2TAexCF,SAAS,EACTD,cAAc,EAEd,UAACI,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,OAAO,IACvBN,GAAG,oCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,kBAEF;AAAA,GAEC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,iCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,gEAKF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,oCAEF;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAQrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,6TAkBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,SAAS,IACzBN,GAAG,wCAGF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,qBAEF;AAAA,GACD,UAACK,KAAK;EAAA,OACNA,KAAK,CAACQ,QAAQ,IACdb,GAAG,sBAEF;AAAA,GAIC,UAACK,KAAK;EAAA,OACRA,KAAK,CAACS,KAAK,KAAK,MAAM,IACtBd,GAAG,sBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,OAAO,IACvBd,GAAG,uBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,QAAQ,IACxBd,GAAG,wBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACS,KAAK,KAAK,SAAS,IACzBd,GAAG,yBAEF;AAAA,EACJ;AAEDU,WAAW,CAACD,WAAW,GAAG,aAAa"}

package/dist/index.js

@@ -3300,6 +3300,43 @@
   DependencyIcon.displayName = "DependencyIcon";
   var DependencyIcon$1 = DependencyIcon;
 
+  /**
+   * @component DescriptionIcon
+   * @description
+   *
+   * The React Icon component is a visual element that displays an icon to represent a concept, object, or action.
+   * The Icon component is
+   * customizable, allowing for variations in size, color, and style to fit the needs of the application.
+   *
+   *
+   * @example
+   * return (
+   *   <DescriptionIcon className="mr-2" />
+   * )
+   *
+   * @see
+   * https://system.activecollab.com/?path=/story/foundation-icons-icons--icons
+   * @see
+   * https://design.activecollab.com/docs/foundations/icons
+   */
+  var DescriptionIcon = /*#__PURE__*/React__default["default"].forwardRef(function (props, svgRef) {
+    return /*#__PURE__*/React__default["default"].createElement("svg", _extends({
+      width: 24,
+      height: 24,
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-testid": "DescriptionIcon",
+      fill: "var(--color-theme-600)",
+      focusable: false,
+      ref: svgRef
+    }, props), /*#__PURE__*/React__default["default"].createElement("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M20 20H4a2 2 0 01-2-2V6a2 2 0 012-2h16a2 2 0 012 2v12a2 2 0 01-2 2zM4 6v12h16V6H4zm2 3h12v2H6V9zm0 4h10v2H6v-2z"
+    }));
+  });
+  DescriptionIcon.displayName = "DescriptionIcon";
+  var DescriptionIcon$1 = DescriptionIcon;
+
   /**
    * @component DiscussionAddIcon
    * @description
@@ -11454,7 +11491,7 @@
   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:500;"]);
@@ -11462,10 +11499,18 @@
     return props.disabled && styled.css(["cursor:default;"]);
   }, function (props) {
     return props.$loading && styled.css(["cursor:progress;"]);
+  }, function (props) {
+    return props.align === "left" && styled.css(["text-align:left;"]);
+  }, function (props) {
+    return props.align === "right" && styled.css(["text-align:right;"]);
+  }, function (props) {
+    return props.align === "center" && styled.css(["text-align:center;"]);
+  }, function (props) {
+    return props.align === "justify" && styled.css(["text-align:justify;"]);
   });
   StyledInput$2.displayName = "StyledInput";
 
-  var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "inputClassName", "wrapperClick"];
+  var _excluded$N = ["className", "style", "type", "disabled", "size", "invalid", "startAdornment", "endAdornment", "wrapRef", "wrapperClick", "typographyProps"];
   var Input = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
     var _ref$className = _ref.className,
       className = _ref$className === void 0 ? "" : _ref$className,
@@ -11481,8 +11526,8 @@
       startAdornment = _ref.startAdornment,
       endAdornment = _ref.endAdornment,
       wrapRef = _ref.wrapRef,
-      inputClassName = _ref.inputClassName,
       wrapperClick = _ref.wrapperClick,
+      typographyProps = _ref.typographyProps,
       rest = _objectWithoutProperties(_ref, _excluded$N);
     var intInputRef = React.useRef(null);
     var handleRef = useForkRef(ref, intInputRef);
@@ -11504,10 +11549,10 @@
       type: type,
       $size: size,
       disabled: disabled,
-      className: classNames__default["default"]("c-input", inputClassName),
+      className: "c-input",
       "aria-invalid": invalid,
       "data-form-type": "other"
-    }, rest)), endAdornment);
+    }, typographyProps, rest)), endAdornment);
   });
   Input.displayName = "Input";
 
@@ -17963,6 +18008,7 @@
   exports.DateStepper = DateStepper;
   exports.DependencyIcon = DependencyIcon$1;
   exports.DependencySmallIcon = DependencySmallIcon$1;
+  exports.DescriptionIcon = DescriptionIcon$1;
   exports.Dialog = Dialog;
   exports.DiscussionAddIcon = DiscussionAddIcon$1;
   exports.DiscussionIcon = DiscussionIcon$1;