@activecollab/components 1.0.236 → 1.0.238

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

@@ -4,58 +4,25 @@ import { FontStyle } from "../FontStyle";
 export var StyledInputWrapper = styled.div.withConfig({
   displayName: "Styles__StyledInputWrapper",
   componentId: "sc-ce8kcp-0"
-})(["", " ", " ", " border-width:1px;border-style:solid;", " border-radius:8px;padding:4px;height:32px;background-color:var(--input-background-color);transition:all 0.3s ease;width:360px;", " ", " ", " ", " ", " ", " ", ""], {
-  "cursor": "text"
-}, {
-  "display": "flex"
-}, {
-  "alignItems": "center"
-}, {
-  "borderColor": "var(--color-theme-500)"
-}, FontStyle, BoxSizingStyle, function (props) {
+})(["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) {
   return props.$size === "small" && css(["border-radius:6px;height:24px;"]);
 }, function (props) {
   return props.$size === "big" && css(["height:40px;"]);
 }, function (props) {
-  return props.$disabled && css(["", ""], {
-    "cursor": "not-allowed",
-    "opacity": "0.5"
-  });
+  return props.$disabled && css(["cursor:default;opacity:50%;"]);
 }, function (props) {
-  return !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{", "}"], {
-    "borderColor": "var(--color-primary)"
-  });
+  return !props.$disabled && !props.$invalid && css(["&:focus-within,&:hover{border-color:var(--color-primary);}"]);
 }, function (props) {
-  return !props.$disabled && props.$invalid && css(["", ""], {
-    "borderColor": "var(--red-alert)"
-  });
+  return !props.$disabled && props.$invalid && css(["border-color:var(--red-alert);"]);
 });
 StyledInputWrapper.displayName = "StyledInputWrapper";
 export var StyledInput = styled.input.withConfig({
   displayName: "Styles__StyledInput",
   componentId: "sc-ce8kcp-1"
-})(["", " ", " ", " ", " ", " ", " padding:0px;margin:0 4px;background-color:var(--input-background-color);border:none;outline:none;&::placeholder{", "}", " ", " ", ""], {
-  "fontSize": "0.875rem"
-}, {
-  "color": "var(--color-theme-900)"
-}, {
-  "lineHeight": "1.375"
-}, {
-  "letterSpacing": "0.02em"
-}, {
-  "fontWeight": "400"
-}, {
-  "width": "100%"
-}, {
-  "color": "var(--color-theme-transparent-500)"
+})(["background-color:var(--input-background-color);border:none;color:var(--color-theme-900);font-size:0.875rem;font-weight:400;letter-spacing:0.02em;line-height:1.375;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 === "big" && css(["", ""], {
-    "fontSize": "1rem"
-  });
-}, function (props) {
-  return props.disabled && css(["", ""], {
-    "cursor": "not-allowed"
-  });
+  return props.disabled && css(["cursor:default;"]);
 }, function (props) {
   return props.$loading && css(["cursor:progress;"]);
 });

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 tw from \"twin.macro\";\nimport { InputSize } from \"./types\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\ninterface StyledInputWrapperProps {\n  $size?: InputSize;\n  $invalid?: boolean;\n  $disabled?: boolean;\n}\n\nexport const StyledInputWrapper = styled.div<StyledInputWrapperProps>`\n  ${tw`tw-cursor-text`}\n  ${tw`tw-flex`}\n  ${tw`tw-items-center`}\n  border-width: 1px;\n  border-style: solid;\n  ${tw`tw-border-theme-500`}\n  border-radius: 8px;\n  padding: 4px;\n  height: 32px;\n  background-color: var(--input-background-color);\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.$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      &:focus-within,\n      &:hover {\n        ${tw`tw-border-primary`}\n      }\n    `}\n\n  ${(props) =>\n    !props.$disabled &&\n    props.$invalid &&\n    css`\n      ${tw`tw-border-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  ${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  ${tw`tw-w-full`}\n\n  padding: 0px;\n  margin: 0 4px;\n\n  background-color: var(--input-background-color);\n  border: none;\n  outline: none;\n\n  &::placeholder {\n    ${tw`tw-text-theme-transparent-500`}\n  }\n\n  ${(props) =>\n    props.$size === \"big\" &&\n    css`\n      ${tw`tw-text-body-1`}\n    `}\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      ${tw`tw-cursor-not-allowed`}\n    `}\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;AAG/C,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,IAAMC,kBAAkB,GAAGJ,MAAM,CAACK,GAAG;EAAA;EAAA;AAAA,iOACtC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAQ,CAAC,EACT;EAAA;AAAgB,CAAC,EAGjB;EAAA;AAAoB,CAAC,EAQvBF,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,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfP,GAAG,WACG;IAAA;IAAA;EAAoC,CAAC,CAC1C;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChB,CAACF,KAAK,CAACG,QAAQ,IACfR,GAAG,mCAGK;IAAA;EAAkB,CAAC,CAE1B;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,SAAS,IAChBF,KAAK,CAACG,QAAQ,IACdR,GAAG,WACG;IAAA;EAAgB,CAAC,CACtB;AAAA,EACJ;AAEDG,kBAAkB,CAACM,WAAW,GAAG,oBAAoB;AAOrD,OAAO,IAAMC,WAAW,GAAGX,MAAM,CAACY,KAAK;EAAA;EAAA;AAAA,0KACjC;EAAA;AAAe,CAAC,EAChB;EAAA;AAAkB,CAAC,EACnB;EAAA;AAAmB,CAAC,EACpB;EAAA;AAAoB,CAAC,EACrB;EAAA;AAAgB,CAAC,EACjB;EAAA;AAAU,CAAC,EAUT;EAAA;AAA8B,CAAC,EAGnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,WACG;IAAA;EAAe,CAAC,CACrB;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACO,QAAQ,IACdZ,GAAG,WACG;IAAA;EAAsB,CAAC,CAC5B;AAAA,GAED,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"],"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.$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  line-height: 1.375;\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.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,sTAexCF,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,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,sTAmBnC,UAACN,KAAK;EAAA,OACNA,KAAK,CAACC,KAAK,KAAK,KAAK,IACrBN,GAAG,qBAEF;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"}