@activecollab/components 1.0.22 → 1.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/components/Bubble/Styles.js +2 -2
  2. package/dist/cjs/components/Bubble/Styles.js.map +1 -1
  3. package/dist/cjs/components/Button/Button.js +1 -0
  4. package/dist/cjs/components/Button/Button.js.map +1 -1
  5. package/dist/cjs/components/Button/Styles.js +3 -1
  6. package/dist/cjs/components/Button/Styles.js.map +1 -1
  7. package/dist/cjs/components/Links/Link.js +1 -0
  8. package/dist/cjs/components/Links/Link.js.map +1 -1
  9. package/dist/cjs/components/Links/Styles.js +3 -1
  10. package/dist/cjs/components/Links/Styles.js.map +1 -1
  11. package/dist/cjs/components/Pressed/Styles.js +2 -2
  12. package/dist/cjs/components/Pressed/Styles.js.map +1 -1
  13. package/dist/esm/components/Bubble/Styles.d.ts.map +1 -1
  14. package/dist/esm/components/Bubble/Styles.js +2 -2
  15. package/dist/esm/components/Bubble/Styles.js.map +1 -1
  16. package/dist/esm/components/Button/Button.d.ts +1 -1
  17. package/dist/esm/components/Button/Button.d.ts.map +1 -1
  18. package/dist/esm/components/Button/Button.js +1 -0
  19. package/dist/esm/components/Button/Button.js.map +1 -1
  20. package/dist/esm/components/Button/Styles.d.ts.map +1 -1
  21. package/dist/esm/components/Button/Styles.js +3 -1
  22. package/dist/esm/components/Button/Styles.js.map +1 -1
  23. package/dist/esm/components/Links/Link.d.ts +1 -1
  24. package/dist/esm/components/Links/Link.d.ts.map +1 -1
  25. package/dist/esm/components/Links/Link.js +1 -0
  26. package/dist/esm/components/Links/Link.js.map +1 -1
  27. package/dist/esm/components/Links/Styles.d.ts.map +1 -1
  28. package/dist/esm/components/Links/Styles.js +3 -1
  29. package/dist/esm/components/Links/Styles.js.map +1 -1
  30. package/dist/esm/components/Pressed/Styles.d.ts.map +1 -1
  31. package/dist/esm/components/Pressed/Styles.js +2 -2
  32. package/dist/esm/components/Pressed/Styles.js.map +1 -1
  33. package/dist/index.js +12 -6
  34. package/dist/index.js.map +1 -1
  35. package/dist/index.min.js +1 -1
  36. package/dist/index.min.js.map +1 -1
  37. package/package.json +1 -1
@@ -16,9 +16,9 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
16
16
  var StyledBubble = _styledComponents.default.div.withConfig({
17
17
  displayName: "Styles__StyledBubble",
18
18
  componentId: "sc-tloccl-0"
19
- })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", ""], {
19
+ })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", " background-color:var(--page-paper-main);"], {
20
20
  "--tw-bg-opacity": "1",
21
- "backgroundColor": "var(--color-theme-100)",
21
+ "backgroundColor": "rgba(255, 255, 255, var(--tw-bg-opacity))",
22
22
  "--tw-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
23
23
  "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
24
24
  "borderColor": "var(--color-theme-200)",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Bubble/Styles.ts"],"names":["StyledBubble","styled","div","FontStyle","BoxSizingStyle","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,+DACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADmB,EAGrBC,oBAHqB,EAIrBC,8BAJqB,CAAlB;;;AAOPJ,YAAY,CAACK,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-bg-theme-100 tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n transition: opacity 0.2s, visibility 0.2s;\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Bubble/Styles.ts"],"names":["StyledBubble","styled","div","FontStyle","BoxSizingStyle","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;AAEO,IAAMA,YAAY,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,wGACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADmB,EAGrBC,oBAHqB,EAIrBC,8BAJqB,CAAlB;;;AAQPJ,YAAY,CAACK,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n transition: opacity 0.2s, visibility 0.2s;\n ${FontStyle}\n ${BoxSizingStyle}\n background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"file":"Styles.js"}
@@ -48,6 +48,7 @@ var Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
48
48
  "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
49
49
  "c-btn--text_gray": variant === "option" || variant === "text gray",
50
50
  "c-btn--dark_transparent": variant === "dark transparent",
51
+ "c-btn--circle-raised": variant === "circle raised",
51
52
  "c-btn--big": size === "big",
52
53
  "c-btn--small": size === "small",
53
54
  "c-btn--icon-only": children instanceof Object && !(children instanceof Array)
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["Button","ref","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAKA;;;;;;;;;;;;;;;;AAwBA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,uBACpB,gBASEC,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,WAOT;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAE,yBAAW,OAAX,EAAoBC,SAApB,EAA+B;AACxC,0BAAoBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAExC,yBAAmBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGxC,6BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJA;AAKxC,0BAAoBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMxC,iCAA2BA,OAAO,KAAK,kBANC;AAOxC,oBAAcC,IAAI,KAAK,KAPiB;AAQxC,sBAAgBA,IAAI,KAAK,OARe;AASxC,0BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAVQ,KAA/B,CAFb;AAcE,IAAA,QAAQ,EAAEP,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAd1C;AAeE,IAAA,OAAO,EAAEN,OAfX;AAgBE,IAAA,IAAI,EAAEC;AAhBR,KAiBMG,IAjBN;AAkBE,IAAA,GAAG,EAAEN;AAlBP,MAoBGC,QAAQ,YAAYO,KAApB,gBACC,6BAAC,4BAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,6BAAC,2BAAD;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAlCJ,CADF;AAuCD,CAnDmB,CAAf;;AAsDPF,MAAM,CAACa,WAAP,GAAqB,QAArB","sourcesContent":["import React, { ReactNode, forwardRef } from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface IButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n /** Children type of node or string */\n children: ReactNode;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<HTMLButtonElement, IButtonProps>(\n (\n {\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n disabled={disabled}\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n {...args}\n ref={ref}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"file":"Button.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["Button","ref","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AAKA;;;;;;;;;;;;;;;;AAyBA;AACA;AACA;AACO,IAAMA,MAAM,gBAAG,uBACpB,gBASEC,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,WAOT;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,6BAAC,oBAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAE,yBAAW,OAAX,EAAoBC,SAApB,EAA+B;AACxC,0BAAoBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAExC,yBAAmBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGxC,6BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJA;AAKxC,0BAAoBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMxC,iCAA2BA,OAAO,KAAK,kBANC;AAOxC,8BAAwBA,OAAO,KAAK,eAPI;AAQxC,oBAAcC,IAAI,KAAK,KARiB;AASxC,sBAAgBA,IAAI,KAAK,OATe;AAUxC,0BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAXQ,KAA/B,CAFb;AAeE,IAAA,QAAQ,EAAEP,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAf1C;AAgBE,IAAA,OAAO,EAAEN,OAhBX;AAiBE,IAAA,IAAI,EAAEC;AAjBR,KAkBMG,IAlBN;AAmBE,IAAA,GAAG,EAAEN;AAnBP,MAqBGC,QAAQ,YAAYO,KAApB,gBACC,6BAAC,4BAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,6BAAC,2BAAD;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAnCJ,CADF;AAwCD,CApDmB,CAAf;;AAuDPF,MAAM,CAACa,WAAP,GAAqB,QAArB","sourcesContent":["import React, { ReactNode, forwardRef } from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface IButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n /** Children type of node or string */\n children: ReactNode;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<HTMLButtonElement, IButtonProps>(\n (\n {\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n disabled={disabled}\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n {...args}\n ref={ref}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"file":"Button.js"}
@@ -20,7 +20,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
20
20
  var StyledButton = _styledComponents.default.button.withConfig({
21
21
  displayName: "Styles__StyledButton",
22
22
  componentId: "sc-vi1kcr-0"
23
- })(["", " ", " -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.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
23
+ })(["", " ", " -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.FontStyle, _BoxSizingStyle.BoxSizingStyle, function (props) {
24
24
  return props.size === "small" && (0, _styledComponents.css)(["height:24px;"]);
25
25
  }, function (props) {
26
26
  return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
@@ -34,6 +34,8 @@ var StyledButton = _styledComponents.default.button.withConfig({
34
34
  return (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.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);}"]);
35
35
  }, function (props) {
36
36
  return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.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);}"]);
37
+ }, function (props) {
38
+ return props.variant === "circle raised" && (0, _styledComponents.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);}"]);
37
39
  }, function (props) {
38
40
  return props.iconOnly && (0, _styledComponents.css)(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && (0, _styledComponents.css)(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && (0, _styledComponents.css)(["width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["width:40px;"]));
39
41
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;;;;;AAMO,IAAMA,YAAY,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,4eACrBC,oBADqB,EAErBC,8BAFqB,EA0CrB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,OAAf,QACAC,qBADA,mBADA;AAAA,CA1CqB,EAgDrB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,IAAN,KAAe,KAAf,QACAC,qBADA,mBADA;AAAA,CAhDqB,EAsDrB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,SAAlB,IAA+BH,KAAK,CAACG,OAAN,KAAkB,WAAlD,SACAD,qBADA,0UADA;AAAA,CAtDqB,EAyErB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,WAAlB,IAAiCH,KAAK,CAACG,OAAN,KAAkB,UAApD,SACAD,qBADA,kVADA;AAAA,CAzEqB,EA8FrB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACG,OAAN,KAAkB,kBAAlB,QACAD,qBADA,mMADA;AAAA,CA9FqB,EA+GrB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,UAAlB,IAAgCH,KAAK,CAACG,OAAN,KAAkB,cAAnD,SACAD,qBADA,iNADA;AAAA,CA/GqB,EAgIrB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,QAAlB,IAA8BH,KAAK,CAACG,OAAN,KAAkB,WAAjD,SACAD,qBADA,yQADA;AAAA,CAhIqB,EAmJrB,UAACF,KAAD;AAAA,SACAA,KAAK,CAACI,QAAN,QACAF,qBADA,yGAQI,CAACF,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BD,KAAK,CAACC,IAAN,KAAe,KAA1C,SACFC,qBADE,0CARJ,EAaIF,KAAK,CAACC,IAAN,KAAe,OAAf,QACFC,qBADE,kBAbJ,EAkBIF,KAAK,CAACC,IAAN,KAAe,KAAf,QACFC,qBADE,kBAlBJ,CADA;AAAA,CAnJqB,EA4KrB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,SAAlB,IACCH,KAAK,CAACG,OAAN,KAAkB,WADnB,IAECH,KAAK,CAACG,OAAN,KAAkB,WAFnB,IAGCH,KAAK,CAACG,OAAN,KAAkB,UAHpB,SAIAD,qBAJA,oIAYI,CAACF,KAAK,CAACC,IAAN,KAAe,OAAf,IAA0BD,KAAK,CAACC,IAAN,KAAe,KAA1C,SACFC,qBADE,0CAZJ,CADA;AAAA,CA5KqB,EA+LrB,UAACF,KAAD;AAAA,SACA,CAACA,KAAK,CAACG,OAAN,KAAkB,UAAlB,IACCH,KAAK,CAACG,OAAN,KAAkB,cADnB,IAECH,KAAK,CAACG,OAAN,KAAkB,QAFnB,IAGCH,KAAK,CAACG,OAAN,KAAkB,WAHnB,IAICH,KAAK,CAACG,OAAN,KAAkB,kBAJpB,SAKAD,qBALA,yIAYIF,KAAK,CAACC,IAAN,KAAe,OAAf,QACFC,qBADE,oCAZJ,EAgBIF,KAAK,CAACC,IAAN,KAAe,KAAf,QACFC,qBADE,oCAhBJ,CADA;AAAA,CA/LqB,CAAlB;;;AAuNPP,YAAY,CAACU,WAAb,GAA2B,cAA3B;;AAEO,IAAMC,oBAAoB,GAAGV,0BAAOW,IAAV;AAAA;AAAA;AAAA,wCAA1B;;;AAKPD,oBAAoB,CAACD,WAArB,GAAmC,sBAAnC;;AAEO,IAAMG,mBAAmB,GAAGZ,0BAAOW,IAAV;AAAA;AAAA;AAAA,8CAAzB;;;AAOPC,mBAAmB,CAACH,WAApB,GAAkC,qBAAlC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 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 &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\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 === \"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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\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.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\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 === \"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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\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 === \"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 display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
@@ -42,6 +42,7 @@ var Link = function Link(_ref) {
42
42
  "c-link--text_colored": variant === "tertiary" || variant === "text colored",
43
43
  "c-link--text_gray": variant === "option" || variant === "text gray",
44
44
  "c-link--dark_transparent": variant === "dark transparent",
45
+ "c-link--circle_raised": variant === "circle raised",
45
46
  "c-link--big": size === "big",
46
47
  "c-link--small": size === "small",
47
48
  "c-link--icon-only": children instanceof Object && !(children instanceof Array),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Links/Link.tsx"],"names":["Link","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAwBA;AACA;AACA;AACO,IAAMA,IAAoB,GAAG,SAAvBA,IAAuB,OAO9B;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,WAKN;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAE,yBAAW,QAAX,EAAqBC,SAArB,EAAgC;AACzC,2BAAqBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAEzC,0BAAoBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGzC,8BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJC;AAKzC,2BAAqBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMzC,kCAA4BA,OAAO,KAAK,kBANC;AAOzC,qBAAeC,IAAI,KAAK,KAPiB;AAQzC,uBAAiBA,IAAI,KAAK,OARe;AASzC,2BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAVS;AAWzC,0BAAoBJ;AAXqB,KAAhC,CAFb;AAeE,IAAA,OAAO,EAAEF,OAfX;AAgBE,IAAA,IAAI,EAAEC,IAhBR;AAiBE,IAAA,QAAQ,EAAEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAjB1C,KAkBMF,IAlBN,GAoBGL,QAAQ,YAAYO,KAApB,gBACC,6BAAC,0BAAD;AAAoB,IAAA,SAAS,EAAC;AAA9B,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,6BAAC,yBAAD;AACE,MAAA,SAAS,EAAC,2BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAlCJ,CADF;AAuCD,CA/CM;;;AAiDPD,IAAI,CAACY,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { FC, BaseHTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLAnchorElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Link component\n */\nexport const Link: FC<ILinkProps> = ({\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n}) => {\n return (\n <StyledLink\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n};\n\nLink.displayName = \"Link\";\n"],"file":"Link.js"}
1
+ {"version":3,"sources":["../../../../src/components/Links/Link.tsx"],"names":["Link","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;;;;;AAyBA;AACA;AACA;AACO,IAAMA,IAAoB,GAAG,SAAvBA,IAAuB,OAO9B;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,WAKN;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,6BAAC,kBAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAE,yBAAW,QAAX,EAAqBC,SAArB,EAAgC;AACzC,2BAAqBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAEzC,0BAAoBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGzC,8BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJC;AAKzC,2BAAqBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMzC,kCAA4BA,OAAO,KAAK,kBANC;AAOzC,+BAAyBA,OAAO,KAAK,eAPI;AAQzC,qBAAeC,IAAI,KAAK,KARiB;AASzC,uBAAiBA,IAAI,KAAK,OATe;AAUzC,2BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAXS;AAYzC,0BAAoBJ;AAZqB,KAAhC,CAFb;AAgBE,IAAA,OAAO,EAAEF,OAhBX;AAiBE,IAAA,IAAI,EAAEC,IAjBR;AAkBE,IAAA,QAAQ,EAAEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAlB1C,KAmBMF,IAnBN,GAqBGL,QAAQ,YAAYO,KAApB,gBACC,6BAAC,0BAAD;AAAoB,IAAA,SAAS,EAAC;AAA9B,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,6BAAC,yBAAD;AACE,MAAA,SAAS,EAAC,2BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAnCJ,CADF;AAwCD,CAhDM;;;AAkDPD,IAAI,CAACY,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { FC, BaseHTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLAnchorElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Link component\n */\nexport const Link: FC<ILinkProps> = ({\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n}) => {\n return (\n <StyledLink\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n};\n\nLink.displayName = \"Link\";\n"],"file":"Link.js"}
@@ -27,7 +27,7 @@ exports.StyledLinkElement = StyledLinkElement;
27
27
  var StyledLink = _styledComponents.default.a.withConfig({
28
28
  displayName: "Styles__StyledLink",
29
29
  componentId: "sc-1c1jdox-1"
30
- })(["", " ", " ", " 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.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
30
+ })(["", " ", " ", " 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.FontStyle, _BoxSizingStyle.BoxSizingStyle, {
31
31
  "WebkitFontSmoothing": "antialiased",
32
32
  "MozOsxFontSmoothing": "grayscale",
33
33
  "fontWeight": "500",
@@ -56,6 +56,8 @@ var StyledLink = _styledComponents.default.a.withConfig({
56
56
  return (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.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);}"]);
57
57
  }, function (props) {
58
58
  return props.variant === "dark transparent" && (0, _styledComponents.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);}"]);
59
+ }, function (props) {
60
+ return props.variant === "circle raised" && (0, _styledComponents.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);}"]);
59
61
  }, function (props) {
60
62
  return props.iconOnly && (0, _styledComponents.css)(["padding:0;width:32px;", " ", ""], props.size === "small" && (0, _styledComponents.css)(["radius:16px;width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;width:40px;"]));
61
63
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","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: all 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.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"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","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: all 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"],"file":"Styles.js"}
@@ -19,9 +19,9 @@ var StyledPressed = (0, _styledComponents.default)(_Button.Button).withConfig({
19
19
  displayName: "Styles__StyledPressed",
20
20
  componentId: "sc-1wqfsg5-0"
21
21
  })(["", ""], function (props) {
22
- return props.active && (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", ""], {
22
+ return props.active && (0, _styledComponents.css)(["", " ", " ", " ", " ", " ", " ", ""], {
23
23
  "pointerEvents": "none"
24
- }, (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && (0, _styledComponents.css)(["background-color:var(--only-black);"]), (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["color:var(--color-primary);", ""], props.children instanceof Array && (0, _styledComponents.css)(["background-color:var(--color-theme-300);"])));
24
+ }, (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["background-color:var(--color-primary-800);"]), (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["border-color:var(--color-primary);color:var(--color-primary);"]), props.variant === "dark transparent" && (0, _styledComponents.css)(["background-color:var(--only-black);"]), props.variant === "circle raised" && (0, _styledComponents.css)(["background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);"]), (props.variant === "tertiary" || props.variant === "text colored") && (0, _styledComponents.css)(["background-color:var(--color-primary-200);"]), (props.variant === "option" || props.variant === "text gray") && (0, _styledComponents.css)(["color:var(--color-primary);", ""], props.children instanceof Array && (0, _styledComponents.css)(["background-color:var(--color-theme-300);"])));
25
25
  });
26
26
  exports.StyledPressed = StyledPressed;
27
27
  StyledPressed.displayName = "StyledPressed";
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Pressed/Styles.ts"],"names":["StyledPressed","Button","props","active","css","variant","children","Array","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAGO,IAAMA,aAAa,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,aACtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,QACAC,qBADA,qCAEM;AAAA;AAAA,GAFN,EAII,CAACF,KAAK,CAACG,OAAN,KAAkB,SAAlB,IAA+BH,KAAK,CAACG,OAAN,KAAkB,WAAlD,SACFD,qBADE,iDAJJ,EASI,CAACF,KAAK,CAACG,OAAN,KAAkB,WAAlB,IAAiCH,KAAK,CAACG,OAAN,KAAkB,UAApD,SACFD,qBADE,oEATJ,EAeIF,KAAK,CAACG,OAAN,KAAkB,kBAAlB,QACFD,qBADE,0CAfJ,EAoBE,CAACF,KAAK,CAACG,OAAN,KAAkB,UAAlB,IAAgCH,KAAK,CAACG,OAAN,KAAkB,cAAnD,SACAD,qBADA,iDApBF,EAyBE,CAACF,KAAK,CAACG,OAAN,KAAkB,QAAlB,IAA8BH,KAAK,CAACG,OAAN,KAAkB,WAAjD,SACAD,qBADA,uCAGIF,KAAK,CAACI,QAAN,YAA0BC,KAA1B,QACFH,qBADE,+CAHJ,CAzBF,CADA;AAAA,CADsB,CAAnB;;AAsCPJ,aAAa,CAACQ,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"}
1
+ {"version":3,"sources":["../../../../src/components/Pressed/Styles.ts"],"names":["StyledPressed","Button","props","active","css","variant","children","Array","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;AAGO,IAAMA,aAAa,GAAG,+BAAOC,cAAP,CAAH;AAAA;AAAA;AAAA,aACtB,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,MAAN,QACAC,qBADA,0CAEM;AAAA;AAAA,GAFN,EAII,CAACF,KAAK,CAACG,OAAN,KAAkB,SAAlB,IAA+BH,KAAK,CAACG,OAAN,KAAkB,WAAlD,SACFD,qBADE,iDAJJ,EASI,CAACF,KAAK,CAACG,OAAN,KAAkB,WAAlB,IAAiCH,KAAK,CAACG,OAAN,KAAkB,UAApD,SACFD,qBADE,oEATJ,EAeIF,KAAK,CAACG,OAAN,KAAkB,kBAAlB,QACFD,qBADE,0CAfJ,EAoBIF,KAAK,CAACG,OAAN,KAAkB,eAAlB,QACFD,qBADE,uFApBJ,EA0BE,CAACF,KAAK,CAACG,OAAN,KAAkB,UAAlB,IAAgCH,KAAK,CAACG,OAAN,KAAkB,cAAnD,SACAD,qBADA,iDA1BF,EA+BE,CAACF,KAAK,CAACG,OAAN,KAAkB,QAAlB,IAA8BH,KAAK,CAACG,OAAN,KAAkB,WAAjD,SACAD,qBADA,uCAGIF,KAAK,CAACI,QAAN,YAA0BC,KAA1B,QACFH,qBADE,+CAHJ,CA/BF,CADA;AAAA,CADsB,CAAnB;;AA4CPJ,aAAa,CAACQ,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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Bubble/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEAKxB,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Bubble/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,YAAY,oEAMxB,CAAC"}
@@ -4,9 +4,9 @@ import { FontStyle } from "../FontStyle";
4
4
  export var StyledBubble = styled.div.withConfig({
5
5
  displayName: "Styles__StyledBubble",
6
6
  componentId: "sc-tloccl-0"
7
- })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", ""], {
7
+ })(["", " transition:opacity 0.2s,visibility 0.2s;", " ", " background-color:var(--page-paper-main);"], {
8
8
  "--tw-bg-opacity": "1",
9
- "backgroundColor": "var(--color-theme-100)",
9
+ "backgroundColor": "rgba(255, 255, 255, var(--tw-bg-opacity))",
10
10
  "--tw-shadow": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
11
11
  "boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)",
12
12
  "borderColor": "var(--color-theme-200)",
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Bubble/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","StyledBubble","div","displayName"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,YAAY,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,+DACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADmB,EAGrBF,SAHqB,EAIrBD,cAJqB,CAAlB;AAOPE,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-bg-theme-100 tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n transition: opacity 0.2s, visibility 0.2s;\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Bubble/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","StyledBubble","div","displayName"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,YAAY,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,wGACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADmB,EAGrBF,SAHqB,EAIrBD,cAJqB,CAAlB;AAQPE,YAAY,CAACE,WAAb,GAA2B,cAA3B","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledBubble = styled.div`\n ${tw`tw-bg-white tw-shadow-md tw-border-theme-200 tw-rounded-lg tw-border tw-border-solid tw-text-theme-800 tw-opacity-100 tw-block tw-visible`}\n transition: opacity 0.2s, visibility 0.2s;\n ${FontStyle}\n ${BoxSizingStyle}\n background-color: var(--page-paper-main);\n`;\n\nStyledBubble.displayName = \"StyledBubble\";\n"],"file":"Styles.js"}
@@ -1,7 +1,7 @@
1
1
  import React, { ReactNode } from "react";
2
2
  export interface IButtonProps extends React.ComponentPropsWithoutRef<"button"> {
3
3
  children: ReactNode;
4
- variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent";
4
+ variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised";
5
5
  size?: "big" | "small";
6
6
  disabled?: boolean;
7
7
  className?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAQrD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAE5E,QAAQ,EAAE,SAAS,CAAC;IAEpB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,CAAC;IAEvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,MAAM,wFAoDlB,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAQrD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IAE5E,QAAQ,EAAE,SAAS,CAAC;IAEpB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IAEpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,MAAM,wFAqDlB,CAAC"}
@@ -26,6 +26,7 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
26
26
  "c-btn--text_colored": variant === "tertiary" || variant === "text colored",
27
27
  "c-btn--text_gray": variant === "option" || variant === "text gray",
28
28
  "c-btn--dark_transparent": variant === "dark transparent",
29
+ "c-btn--circle-raised": variant === "circle raised",
29
30
  "c-btn--big": size === "big",
30
31
  "c-btn--small": size === "small",
31
32
  "c-btn--icon-only": children instanceof Object && !(children instanceof Array)
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","classnames","Button","ref","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;AACA,SACEC,YADF,EAEEC,mBAFF,EAGEC,oBAHF,QAIO,UAJP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;;AAwBA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAC9B,gBASEM,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,WAOT;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,YAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,OAAD,EAAUO,SAAV,EAAqB;AACxC,0BAAoBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAExC,yBAAmBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGxC,6BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJA;AAKxC,0BAAoBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMxC,iCAA2BA,OAAO,KAAK,kBANC;AAOxC,oBAAcC,IAAI,KAAK,KAPiB;AAQxC,sBAAgBA,IAAI,KAAK,OARe;AASxC,0BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAVQ,KAArB,CAFvB;AAcE,IAAA,QAAQ,EAAEP,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAd1C;AAeE,IAAA,OAAO,EAAEN,OAfX;AAgBE,IAAA,IAAI,EAAEC;AAhBR,KAiBMG,IAjBN;AAkBE,IAAA,GAAG,EAAEN;AAlBP,MAoBGC,QAAQ,YAAYO,KAApB,gBACC,oBAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,oBAAC,mBAAD;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAlCJ,CADF;AAuCD,CAnD6B,CAAzB;AAsDPF,MAAM,CAACa,WAAP,GAAqB,QAArB","sourcesContent":["import React, { ReactNode, forwardRef } from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface IButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n /** Children type of node or string */\n children: ReactNode;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<HTMLButtonElement, IButtonProps>(\n (\n {\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n disabled={disabled}\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n {...args}\n ref={ref}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"file":"Button.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Button.tsx"],"names":["React","forwardRef","StyledButton","StyledButtonElement","StyledButtonElements","classnames","Button","ref","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;AACA,SACEC,YADF,EAEEC,mBAFF,EAGEC,oBAHF,QAIO,UAJP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;;AAyBA;AACA;AACA;AACA,OAAO,IAAMC,MAAM,gBAAGL,UAAU,CAC9B,gBASEM,GATF,EAUK;AAAA,MARDC,QAQC,QARDA,QAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,WAOT;AAAA,MANDC,IAMC,QANDA,IAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,SAIC,QAJDA,SAIC;AAAA,MAHEC,IAGF;;AACH,sBACE,oBAAC,YAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAEN,UAAU,CAAC,OAAD,EAAUO,SAAV,EAAqB;AACxC,0BAAoBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAExC,yBAAmBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGxC,6BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJA;AAKxC,0BAAoBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMxC,iCAA2BA,OAAO,KAAK,kBANC;AAOxC,8BAAwBA,OAAO,KAAK,eAPI;AAQxC,oBAAcC,IAAI,KAAK,KARiB;AASxC,sBAAgBA,IAAI,KAAK,OATe;AAUxC,0BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAXQ,KAArB,CAFvB;AAeE,IAAA,QAAQ,EAAEP,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAf1C;AAgBE,IAAA,OAAO,EAAEN,OAhBX;AAiBE,IAAA,IAAI,EAAEC;AAjBR,KAkBMG,IAlBN;AAmBE,IAAA,GAAG,EAAEN;AAnBP,MAqBGC,QAAQ,YAAYO,KAApB,gBACC,oBAAC,oBAAD;AAAsB,IAAA,SAAS,EAAC;AAAhC,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,oBAAC,mBAAD;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAnCJ,CADF;AAwCD,CApD6B,CAAzB;AAuDPF,MAAM,CAACa,WAAP,GAAqB,QAArB","sourcesContent":["import React, { ReactNode, forwardRef } from \"react\";\nimport {\n StyledButton,\n StyledButtonElement,\n StyledButtonElements,\n} from \"./Styles\";\nimport classnames from \"classnames\";\n\nexport interface IButtonProps extends React.ComponentPropsWithoutRef<\"button\"> {\n /** Children type of node or string */\n children: ReactNode;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Button component\n */\nexport const Button = forwardRef<HTMLButtonElement, IButtonProps>(\n (\n {\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n },\n ref\n ) => {\n return (\n <StyledButton\n disabled={disabled}\n className={classnames(\"c-btn\", className, {\n \"c-btn--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-btn--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-btn--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-btn--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-btn--dark_transparent\": variant === \"dark transparent\",\n \"c-btn--circle-raised\": variant === \"circle raised\",\n \"c-btn--big\": size === \"big\",\n \"c-btn--small\": size === \"small\",\n \"c-btn--icon-only\":\n children instanceof Object && !(children instanceof Array),\n })}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n variant={variant}\n size={size}\n {...args}\n ref={ref}\n >\n {children instanceof Array ? (\n <StyledButtonElements className=\"c-btn__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledButtonElement\n className=\"c-btn__elements__element\"\n key={index}\n >\n {value}\n </StyledButtonElement>\n ) : null\n )}\n </StyledButtonElements>\n ) : (\n children\n )}\n </StyledButton>\n );\n }\n);\n\nButton.displayName = \"Button\";\n"],"file":"Button.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,UAAU,iBAAkB,SAAQ,YAAY;IAC9C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFAqNxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAIxC,UAAU,iBAAkB,SAAQ,YAAY;IAC9C,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,sFAqOxB,CAAC;AAIF,eAAO,MAAM,oBAAoB,qEAGhC,CAAC;AAIF,eAAO,MAAM,mBAAmB,qEAK/B,CAAC"}
@@ -4,7 +4,7 @@ import { BoxSizingStyle } from "../BoxSizingStyle";
4
4
  export var StyledButton = styled.button.withConfig({
5
5
  displayName: "Styles__StyledButton",
6
6
  componentId: "sc-vi1kcr-0"
7
- })(["", " ", " -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) {
7
+ })(["", " ", " -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) {
8
8
  return props.size === "small" && css(["height:24px;"]);
9
9
  }, function (props) {
10
10
  return props.size === "big" && css(["height:40px;"]);
@@ -18,6 +18,8 @@ export var StyledButton = styled.button.withConfig({
18
18
  return (props.variant === "tertiary" || props.variant === "text colored") && 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);}"]);
19
19
  }, function (props) {
20
20
  return (props.variant === "option" || props.variant === "text gray") && 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);}"]);
21
+ }, function (props) {
22
+ return props.variant === "circle raised" && 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);}"]);
21
23
  }, function (props) {
22
24
  return props.iconOnly && css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && css(["width:24px;"]), props.size === "big" && css(["width:40px;"]));
23
25
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 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 &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\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 === \"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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\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.iconOnly &&\n css`\n display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Button/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"mappings":"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","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { IButtonProps } from \"./Button\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\n\ninterface StyledButtonProps extends IButtonProps {\n iconOnly: boolean;\n}\n\nexport const StyledButton = styled.button<StyledButtonProps>`\n ${FontStyle}\n ${BoxSizingStyle}\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n vertical-align: middle;\n font-weight: 500;\n display: inline-block;\n line-height: 1;\n margin: 0;\n text-decoration: none;\n font-size: 0.875rem;\n user-select: none;\n cursor: pointer;\n text-align: center;\n\n border: none;\n height: 32px;\n transition: all 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &:focus {\n outline: none;\n }\n\n &:hover {\n text-decoration: none;\n }\n\n &:disabled {\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: var(--ac-br-rounded);\n color: var(--page-paper-main);\n\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: var(--ac-br-rounded);\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n\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 === \"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 === \"tertiary\" || props.variant === \"text colored\") &&\n css`\n padding: 0 8px;\n background-color: transparent;\n border-radius: var(--ac-br-6);\n color: var(--color-primary);\n\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: var(--ac-br-6);\n color: var(--color-theme-700);\n\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 === \"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 display: inline-flex;\n justify-content: center;\n align-items: center;\n padding: 0;\n width: 32px;\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\n `};\n\n ${props.size === \"small\" &&\n css`\n width: 24px;\n `}\n\n ${props.size === \"big\" &&\n css`\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 .c-btn__elements__element:first-child svg {\n margin-left: -6px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -6px;\n }\n\n ${(props.size === \"small\" || props.size === \"big\") &&\n css`\n border-radius: var(--ac-br-rounded);\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 .c-btn__elements__element:first-child svg {\n margin-left: -4px;\n }\n .c-btn__elements__element:last-child svg {\n margin-right: -4px;\n }\n ${props.size === \"small\" &&\n css`\n border-radius: var(--ac-br-4);\n `}\n ${props.size === \"big\" &&\n css`\n border-radius: var(--ac-br-8);\n `}\n `}\n`;\n\nStyledButton.displayName = \"StyledButton\";\n\nexport const StyledButtonElements = styled.span`\n display: flex;\n align-items: center;\n`;\n\nStyledButtonElements.displayName = \"StyledButtonElements\";\n\nexport const StyledButtonElement = styled.span`\n display: inline-flex;\n svg {\n margin: 0 4px;\n }\n`;\n\nStyledButtonElement.displayName = \"StyledButtonElement\";\n"],"file":"Styles.js"}
@@ -1,7 +1,7 @@
1
1
  import { FC, BaseHTMLAttributes, ReactNode } from "react";
2
2
  export interface ILinkProps extends BaseHTMLAttributes<HTMLAnchorElement> {
3
3
  children: ReactNode | string;
4
- variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent";
4
+ variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised";
5
5
  size?: "big" | "small";
6
6
  disabled?: boolean;
7
7
  className?: string;
@@ -1 +1 @@
1
- {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,iBAAiB,CAAC;IAEvE,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,CAAC;IAEvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,UAAU,CA+C/B,CAAC"}
1
+ {"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIjE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,iBAAiB,CAAC;IAEvE,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAE7B,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,CAAC;IAEpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IAEvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAKD,eAAO,MAAM,IAAI,EAAE,EAAE,CAAC,UAAU,CAgD/B,CAAC"}
@@ -26,6 +26,7 @@ export var Link = function Link(_ref) {
26
26
  "c-link--text_colored": variant === "tertiary" || variant === "text colored",
27
27
  "c-link--text_gray": variant === "option" || variant === "text gray",
28
28
  "c-link--dark_transparent": variant === "dark transparent",
29
+ "c-link--circle_raised": variant === "circle raised",
29
30
  "c-link--big": size === "big",
30
31
  "c-link--small": size === "small",
31
32
  "c-link--icon-only": children instanceof Object && !(children instanceof Array),
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Links/Link.tsx"],"names":["React","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAAyD,OAAzD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,EAAqBC,iBAArB,EAAwCC,kBAAxC,QAAkE,UAAlE;;AAwBA;AACA;AACA;AACA,OAAO,IAAMC,IAAoB,GAAG,SAAvBA,IAAuB,OAO9B;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,WAKN;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,oBAAC,UAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAER,UAAU,CAAC,QAAD,EAAWS,SAAX,EAAsB;AACzC,2BAAqBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAEzC,0BAAoBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGzC,8BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJC;AAKzC,2BAAqBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMzC,kCAA4BA,OAAO,KAAK,kBANC;AAOzC,qBAAeC,IAAI,KAAK,KAPiB;AAQzC,uBAAiBA,IAAI,KAAK,OARe;AASzC,2BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAVS;AAWzC,0BAAoBJ;AAXqB,KAAtB,CAFvB;AAeE,IAAA,OAAO,EAAEF,OAfX;AAgBE,IAAA,IAAI,EAAEC,IAhBR;AAiBE,IAAA,QAAQ,EAAEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAjB1C,KAkBMF,IAlBN,GAoBGL,QAAQ,YAAYO,KAApB,gBACC,oBAAC,kBAAD;AAAoB,IAAA,SAAS,EAAC;AAA9B,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,oBAAC,iBAAD;AACE,MAAA,SAAS,EAAC,2BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAlCJ,CADF;AAuCD,CA/CM;AAiDPD,IAAI,CAACY,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { FC, BaseHTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLAnchorElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Link component\n */\nexport const Link: FC<ILinkProps> = ({\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n}) => {\n return (\n <StyledLink\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n};\n\nLink.displayName = \"Link\";\n"],"file":"Link.js"}
1
+ {"version":3,"sources":["../../../../src/components/Links/Link.tsx"],"names":["React","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","children","variant","size","disabled","className","args","Object","Array","map","value","index","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAAyD,OAAzD;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,UAAT,EAAqBC,iBAArB,EAAwCC,kBAAxC,QAAkE,UAAlE;;AAyBA;AACA;AACA;AACA,OAAO,IAAMC,IAAoB,GAAG,SAAvBA,IAAuB,OAO9B;AAAA,MANJC,QAMI,QANJA,QAMI;AAAA,0BALJC,OAKI;AAAA,MALJA,OAKI,6BALM,WAKN;AAAA,MAJJC,IAII,QAJJA,IAII;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,KAGP;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,IACC;;AACJ,sBACE,oBAAC,UAAD;AACE,IAAA,QAAQ,EAAEF,QADZ;AAEE,IAAA,SAAS,EAAER,UAAU,CAAC,QAAD,EAAWS,SAAX,EAAsB;AACzC,2BAAqBH,OAAO,KAAK,SAAZ,IAAyBA,OAAO,KAAK,WADjB;AAEzC,0BAAoBA,OAAO,KAAK,WAAZ,IAA2BA,OAAO,KAAK,UAFlB;AAGzC,8BACEA,OAAO,KAAK,UAAZ,IAA0BA,OAAO,KAAK,cAJC;AAKzC,2BAAqBA,OAAO,KAAK,QAAZ,IAAwBA,OAAO,KAAK,WALhB;AAMzC,kCAA4BA,OAAO,KAAK,kBANC;AAOzC,+BAAyBA,OAAO,KAAK,eAPI;AAQzC,qBAAeC,IAAI,KAAK,KARiB;AASzC,uBAAiBA,IAAI,KAAK,OATe;AAUzC,2BACEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB,CAXS;AAYzC,0BAAoBJ;AAZqB,KAAtB,CAFvB;AAgBE,IAAA,OAAO,EAAEF,OAhBX;AAiBE,IAAA,IAAI,EAAEC,IAjBR;AAkBE,IAAA,QAAQ,EAAEF,QAAQ,YAAYM,MAApB,IAA8B,EAAEN,QAAQ,YAAYO,KAAtB;AAlB1C,KAmBMF,IAnBN,GAqBGL,QAAQ,YAAYO,KAApB,gBACC,oBAAC,kBAAD;AAAoB,IAAA,SAAS,EAAC;AAA9B,KACGP,QAAQ,CAACQ,GAAT,CAAa,UAACC,KAAD,EAAQC,KAAR;AAAA,WACZD,KAAK,gBACH,oBAAC,iBAAD;AACE,MAAA,SAAS,EAAC,2BADZ;AAEE,MAAA,GAAG,EAAEC;AAFP,OAIGD,KAJH,CADG,GAOD,IARQ;AAAA,GAAb,CADH,CADD,GAcCT,QAnCJ,CADF;AAwCD,CAhDM;AAkDPD,IAAI,CAACY,WAAL,GAAmB,MAAnB","sourcesContent":["import React, { FC, BaseHTMLAttributes, ReactNode } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLAnchorElement> {\n /** Children type of node or string */\n children: ReactNode | string;\n /** Variant Buttons */\n variant?:\n | \"primary\"\n | \"secondary\"\n | \"tertiary\"\n | \"option\"\n | \"contained\"\n | \"outlined\"\n | \"text colored\"\n | \"text gray\"\n | \"dark transparent\"\n | \"circle raised\";\n /** Button size can be big, medium or small */\n size?: \"big\" | \"small\";\n /** Disabled prop */\n disabled?: boolean;\n /** CSS classes */\n className?: string;\n}\n\n/**\n * Link component\n */\nexport const Link: FC<ILinkProps> = ({\n children,\n variant = \"contained\",\n size,\n disabled = false,\n className,\n ...args\n}) => {\n return (\n <StyledLink\n disabled={disabled}\n className={classNames(\"c-link\", className, {\n \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n \"c-link--text_colored\":\n variant === \"tertiary\" || variant === \"text colored\",\n \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n \"c-link--dark_transparent\": variant === \"dark transparent\",\n \"c-link--circle_raised\": variant === \"circle raised\",\n \"c-link--big\": size === \"big\",\n \"c-link--small\": size === \"small\",\n \"c-link--icon-only\":\n children instanceof Object && !(children instanceof Array),\n \"c-link--disabled\": disabled,\n })}\n variant={variant}\n size={size}\n iconOnly={children instanceof Object && !(children instanceof Array)}\n {...args}\n >\n {children instanceof Array ? (\n <StyledLinkElements className=\"c-link__elements\">\n {children.map((value, index) =>\n value ? (\n <StyledLinkElement\n className=\"c-link__elements__element\"\n key={index}\n >\n {value}\n </StyledLinkElement>\n ) : null\n )}\n </StyledLinkElements>\n ) : (\n children\n )}\n </StyledLink>\n );\n};\n\nLink.displayName = \"Link\";\n"],"file":"Link.js"}
@@ -1 +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,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EA4NtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAc9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}
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,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,oEAAe,CAAC;AAE9C,eAAO,MAAM,UAAU,+EAgPtB,CAAC;AAEF,eAAO,MAAM,kBAAkB,oEAc9B,CAAC;AAEF,eAAO,MAAM,cAAc,kEA6D1B,CAAC"}
@@ -8,7 +8,7 @@ export var StyledLinkElement = styled.div.withConfig({
8
8
  export var StyledLink = styled.a.withConfig({
9
9
  displayName: "Styles__StyledLink",
10
10
  componentId: "sc-1c1jdox-1"
11
- })(["", " ", " ", " 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, {
11
+ })(["", " ", " ", " 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, {
12
12
  "WebkitFontSmoothing": "antialiased",
13
13
  "MozOsxFontSmoothing": "grayscale",
14
14
  "fontWeight": "500",
@@ -37,6 +37,8 @@ export var StyledLink = styled.a.withConfig({
37
37
  return (props.variant === "option" || props.variant === "text gray") && 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);}"]);
38
38
  }, function (props) {
39
39
  return props.variant === "dark transparent" && 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);}"]);
40
+ }, function (props) {
41
+ return props.variant === "circle raised" && 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);}"]);
40
42
  }, function (props) {
41
43
  return props.iconOnly && css(["padding:0;width:32px;", " ", ""], props.size === "small" && css(["radius:16px;width:24px;"]), props.size === "big" && css(["radius:20px;width:40px;"]));
42
44
  }, function (props) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","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: all 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.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"],"file":"Styles.js"}
1
+ {"version":3,"sources":["../../../../src/components/Links/Styles.ts"],"names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","iconOnly","StyledLinkElements","StyledBackLink","displayName"],"mappings":"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","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: all 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"],"file":"Styles.js"}
@@ -1 +1 @@
1
- {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressed/Styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,eAAO,MAAM,aAAa,+MAoCzB,CAAC"}
1
+ {"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Pressed/Styles.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAI1C,eAAO,MAAM,aAAa,+MA0CzB,CAAC"}