@activecollab/components 1.0.22 → 1.0.23

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

@@ -4,9 +4,9 @@ export var StyledPressed = styled(Button).withConfig({
   displayName: "Styles__StyledPressed",
   componentId: "sc-1wqfsg5-0"
 })(["", ""], function (props) {
-  return props.active && css(["", " ", " ", " ", " ", " ", ""], {
+  return props.active && css(["", " ", " ", " ", " ", " ", " ", ""], {
     "pointerEvents": "none"
-  }, (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"])));
+  }, (props.variant === "primary" || props.variant === "contained") && css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && css(["background-color:var(--only-black);"]), props.variant === "circle raised" && css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && css(["color:var(--color-primary);", ""], props.children instanceof Array && css(["background-color:var(--color-theme-300);"])));
 });
 StyledPressed.displayName = "StyledPressed";
 //# sourceMappingURL=Styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Pressed/Styles.ts"],"names":["styled","css","Button","StyledPressed","props","active","variant","children","Array","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AAGA,OAAO,IAAMC,aAAa,GAAGH,MAAM,CAACE,MAAD,CAAT;AAAA;AAAA;AAAA,aACtB,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,IACAJ,GADA,oCAEM;AAAA;AAAA,GAFN,EAII,CAACG,KAAK,CAACE,OAAN,KAAkB,SAAlB,IAA+BF,KAAK,CAACE,OAAN,KAAkB,WAAlD,KACFL,GADE,gDAJJ,EASI,CAACG,KAAK,CAACE,OAAN,KAAkB,WAAlB,IAAiCF,KAAK,CAACE,OAAN,KAAkB,UAApD,KACFL,GADE,mEATJ,EAeIG,KAAK,CAACE,OAAN,KAAkB,kBAAlB,IACFL,GADE,yCAfJ,EAoBE,CAACG,KAAK,CAACE,OAAN,KAAkB,UAAlB,IAAgCF,KAAK,CAACE,OAAN,KAAkB,cAAnD,KACAL,GADA,gDApBF,EAyBE,CAACG,KAAK,CAACE,OAAN,KAAkB,QAAlB,IAA8BF,KAAK,CAACE,OAAN,KAAkB,WAAjD,KACAL,GADA,sCAGIG,KAAK,CAACG,QAAN,YAA0BC,KAA1B,IACFP,GADE,8CAHJ,CAzBF,CADA;AAAA,CADsB,CAAnB;AAsCPE,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IPressedProps } from \"./Pressed\";\nimport { Button } from \"../Button/Button\";\nimport tw from \"twin.macro\";\n\nexport const StyledPressed = styled(Button)<IPressedProps>`\n  ${(props) =>\n    props.active &&\n    css`\n      ${tw`tw-pointer-events-none`}\n\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledPressed.displayName = \"StyledPressed\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../src/components/Pressed/Styles.ts"],"names":["styled","css","Button","StyledPressed","props","active","variant","children","Array","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,MAAT,QAAuB,kBAAvB;AAGA,OAAO,IAAMC,aAAa,GAAGH,MAAM,CAACE,MAAD,CAAT;AAAA;AAAA;AAAA,aACtB,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,IACAJ,GADA,yCAEM;AAAA;AAAA,GAFN,EAII,CAACG,KAAK,CAACE,OAAN,KAAkB,SAAlB,IAA+BF,KAAK,CAACE,OAAN,KAAkB,WAAlD,KACFL,GADE,gDAJJ,EASI,CAACG,KAAK,CAACE,OAAN,KAAkB,WAAlB,IAAiCF,KAAK,CAACE,OAAN,KAAkB,UAApD,KACFL,GADE,mEATJ,EAeIG,KAAK,CAACE,OAAN,KAAkB,kBAAlB,IACFL,GADE,yCAfJ,EAoBIG,KAAK,CAACE,OAAN,KAAkB,eAAlB,IACFL,GADE,sFApBJ,EA0BE,CAACG,KAAK,CAACE,OAAN,KAAkB,UAAlB,IAAgCF,KAAK,CAACE,OAAN,KAAkB,cAAnD,KACAL,GADA,gDA1BF,EA+BE,CAACG,KAAK,CAACE,OAAN,KAAkB,QAAlB,IAA8BF,KAAK,CAACE,OAAN,KAAkB,WAAjD,KACAL,GADA,sCAGIG,KAAK,CAACG,QAAN,YAA0BC,KAA1B,IACFP,GADE,8CAHJ,CA/BF,CADA;AAAA,CADsB,CAAnB;AA4CPE,aAAa,CAACM,WAAd,GAA4B,eAA5B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IPressedProps } from \"./Pressed\";\nimport { Button } from \"../Button/Button\";\nimport tw from \"twin.macro\";\n\nexport const StyledPressed = styled(Button)<IPressedProps>`\n  ${(props) =>\n    props.active &&\n    css`\n      ${tw`tw-pointer-events-none`}\n\n      ${(props.variant === \"primary\" || props.variant === \"contained\") &&\n      css`\n        background-color: var(--color-primary-800);\n      `}\n\n      ${(props.variant === \"secondary\" || props.variant === \"outlined\") &&\n      css`\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      `}\n\n      ${props.variant === \"dark transparent\" &&\n      css`\n        background-color: var(--only-black);\n      `}\n\n      ${props.variant === \"circle raised\" &&\n      css`\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      `}\n\n    ${(props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n      css`\n        background-color: var(--color-primary-200);\n      `}\n\n    ${(props.variant === \"option\" || props.variant === \"text gray\") &&\n      css`\n        color: var(--color-primary);\n        ${props.children instanceof Array &&\n        css`\n          background-color: var(--color-theme-300);\n        `}\n      `}\n    `}\n`;\n\nStyledPressed.displayName = \"StyledPressed\";\n"],"file":"Styles.js"}

package/dist/index.js

@@ -279,7 +279,7 @@
   var StyledButton$1 = styled__default["default"].button.withConfig({
     displayName: "Styles__StyledButton",
     componentId: "sc-vi1kcr-0"
-  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:all 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
+  })(["", " ", " -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;vertical-align:middle;font-weight:500;display:inline-block;line-height:1;margin:0;text-decoration:none;font-size:0.875rem;user-select:none;cursor:pointer;text-align:center;border:none;height:32px;transition:all 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
     return props.size === "small" && styled.css(["height:24px;"]);
   }, function (props) {
     return props.size === "big" && styled.css(["height:40px;"]);
@@ -293,6 +293,8 @@
     return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
   }, function (props) {
     return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
+  }, function (props) {
+    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
   }, function (props) {
     return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
   }, function (props) {
@@ -335,6 +337,7 @@
         "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
         "c-btn--text_gray": variant === "option" || variant === "text gray",
         "c-btn--dark_transparent": variant === "dark transparent",
+        "c-btn--circle-raised": variant === "circle raised",
         "c-btn--big": size === "big",
         "c-btn--small": size === "small",
         "c-btn--icon-only": children instanceof Object && !(children instanceof Array)
@@ -1781,9 +1784,9 @@
   var StyledBubble = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledBubble",
     componentId: "sc-tloccl-0"
-  })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", ""], {
+  })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", " background-color:var(--page-paper-main);"], {
     "--tw-bg-opacity": "1",
-    "backgroundColor": "var(--color-theme-100)",
+    "backgroundColor": "rgba(255, 255, 255, var(--tw-bg-opacity))",
     "--tw-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
     "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
     "borderColor": "var(--color-theme-200)",
@@ -8033,7 +8036,7 @@
   var StyledLink = styled__default["default"].a.withConfig({
     displayName: "Styles__StyledLink",
     componentId: "sc-1c1jdox-1"
-  })(["", " ", " ", " border:none;height:32px;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
+  })(["", " ", " ", " border:none;height:32px;transition:all 0.3s ease;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:hover{text-decoration:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, {
     "WebkitFontSmoothing": "antialiased",
     "MozOsxFontSmoothing": "grayscale",
     "fontWeight": "500",
@@ -8062,6 +8065,8 @@
     return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:6px;color:var(--color-theme-600);&:focus,&:hover{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
   }, function (props) {
     return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
+  }, function (props) {
+    return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);transition:ease 0.3s all;&:hover{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
   }, function (props) {
     return props.iconOnly && styled.css(["padding:0;width:32px;", " ", ""], props.size === "small" && styled.css(["radius:16px;width:24px;"]), props.size === "big" && styled.css(["radius:20px;width:40px;"]));
   }, function (props) {
@@ -8146,6 +8151,7 @@
         "c-link--text_colored": variant === "tertiary" || variant === "text colored",
         "c-link--text_gray": variant === "option" || variant === "text gray",
         "c-link--dark_transparent": variant === "dark transparent",
+        "c-link--circle_raised": variant === "circle raised",
         "c-link--big": size === "big",
         "c-link--small": size === "small",
         "c-link--icon-only": children instanceof Object && !(children instanceof Array),
@@ -8506,9 +8512,9 @@
     displayName: "Styles__StyledPressed",
     componentId: "sc-1wqfsg5-0"
   })(["", ""], function (props) {
-    return props.active && styled.css(["", " ", " ", " ", " ", " ", ""], {
+    return props.active && styled.css(["", " ", " ", " ", " ", " ", " ", ""], {
       "pointerEvents": "none"
-    }, (props.variant === "primary" || props.variant === "contained") && styled.css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && styled.css(["background-color:var(--only-black);"]), (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && styled.css(["color:var(--color-primary);", ""], props.children instanceof Array && styled.css(["background-color:var(--color-theme-300);"])));
+    }, (props.variant === "primary" || props.variant === "contained") && styled.css(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && styled.css(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && styled.css(["background-color:var(--only-black);"]), props.variant === "circle raised" && styled.css(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && styled.css(["color:var(--color-primary);", ""], props.children instanceof Array && styled.css(["background-color:var(--color-theme-300);"])));
   });
   StyledPressed.displayName = "StyledPressed";