@activecollab/components 1.0.260 → 1.0.262

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-default\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-500);\n      text-decoration: underline var(--color-theme-500);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}

package/dist/index.js

@@ -12206,7 +12206,7 @@
   var StyledLink = styled__default["default"].a.withConfig({
     displayName: "Styles__StyledLink",
     componentId: "sc-1c1jdox-1"
-  })(["", " ", " ", " border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 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:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 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",
@@ -12237,6 +12237,10 @@
     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.variant === "text link-primary" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
+  }, function (props) {
+    return props.variant === "text link-default" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-500);text-decoration:underline var(--color-theme-500);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
   }, 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) {
@@ -12330,7 +12334,9 @@
       variant: variant,
       size: size,
       $iconOnly: children instanceof Object && !(children instanceof Array)
-    }, args), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
+    }, args, {
+      tabIndex: 1
+    }), children instanceof Array ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElements, {
       className: "c-link__elements"
     }, children.map(function (value, index) {
       return value ? /*#__PURE__*/React__default["default"].createElement(StyledLinkElement, {