@activecollab/components 1.0.247 → 1.0.248

package/dist/cjs/components/Links/Styles.js

@@ -60,7 +60,7 @@ exports.StyledLink = StyledLink;
 var StyledLinkElements = _styledComponents.default.div.withConfig({
   displayName: "Styles__StyledLinkElements",
   componentId: "sc-1c1jdox-2"
-})(["display:table;height:inherit;svg{margin:0 4px;margin-bottom:-2px;}", "{display:table-cell;vertical-align:middle;padding-bottom:2px;}"], StyledLinkElement);
+})(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
 exports.StyledLinkElements = StyledLinkElements;
 var StyledBackLink = _styledComponents.default.a.withConfig({
   displayName: "Styles__StyledBackLink",

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","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: table;\n  height: inherit;\n\n  svg {\n    margin: 0 4px;\n    margin-bottom: -2px;\n  }\n\n  ${StyledLinkElement} {\n    display: table-cell;\n    vertical-align: middle;\n    padding-bottom: 2px;\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":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EAiPtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAc9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Styles.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,QAAQ,CAAC;AAEpC,UAAU,eAAgB,SAAQ,UAAU;IAC1C,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EAiPtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAU9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}

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

@@ -49,7 +49,7 @@ export var StyledLink = styled.a.withConfig({
 export var StyledLinkElements = styled.div.withConfig({
   displayName: "Styles__StyledLinkElements",
   componentId: "sc-1c1jdox-2"
-})(["display:table;height:inherit;svg{margin:0 4px;margin-bottom:-2px;}", "{display:table-cell;vertical-align:middle;padding-bottom:2px;}"], StyledLinkElement);
+})(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
 export var StyledBackLink = styled.a.withConfig({
   displayName: "Styles__StyledBackLink",
   componentId: "sc-1c1jdox-3"

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: table;\n  height: inherit;\n\n  svg {\n    margin: 0 4px;\n    margin-bottom: -2px;\n  }\n\n  ${StyledLinkElement} {\n    display: table-cell;\n    vertical-align: middle;\n    padding-bottom: 2px;\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.$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

@@ -11972,7 +11972,7 @@
   var StyledLinkElements = styled__default["default"].div.withConfig({
     displayName: "Styles__StyledLinkElements",
     componentId: "sc-1c1jdox-2"
-  })(["display:table;height:inherit;svg{margin:0 4px;margin-bottom:-2px;}", "{display:table-cell;vertical-align:middle;padding-bottom:2px;}"], StyledLinkElement);
+  })(["display:flex;align-items:center;", "{display:inline-flex;svg{margin:0 4px;}}"], StyledLinkElement);
   var StyledBackLink = styled__default["default"].a.withConfig({
     displayName: "Styles__StyledBackLink",
     componentId: "sc-1c1jdox-3"