@activecollab/components 1.0.208 → 1.0.210
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.
- package/dist/cjs/components/Button/Styles.js +6 -6
- package/dist/cjs/components/Button/Styles.js.map +1 -1
- package/dist/cjs/components/CounterButton/Styles.js +1 -1
- package/dist/cjs/components/CounterButton/Styles.js.map +1 -1
- package/dist/cjs/components/Steppers/DateStepper/Styles.js +3 -2
- package/dist/cjs/components/Steppers/DateStepper/Styles.js.map +1 -1
- package/dist/esm/components/Button/Styles.js +6 -6
- package/dist/esm/components/Button/Styles.js.map +1 -1
- package/dist/esm/components/CounterButton/Styles.d.ts.map +1 -1
- package/dist/esm/components/CounterButton/Styles.js +1 -1
- package/dist/esm/components/CounterButton/Styles.js.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.d.ts.map +1 -1
- package/dist/esm/components/Steppers/DateStepper/Styles.js +3 -2
- package/dist/esm/components/Steppers/DateStepper/Styles.js.map +1 -1
- package/dist/index.js +24 -24
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -18,17 +18,17 @@ var StyledButton = _styledComponents.default.button.withConfig({
|
|
|
18
18
|
}, function (props) {
|
|
19
19
|
return props.size === "big" && (0, _styledComponents.css)(["height:40px;"]);
|
|
20
20
|
}, function (props) {
|
|
21
|
-
return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
21
|
+
return (props.variant === "primary" || props.variant === "contained") && (0, _styledComponents.css)(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
22
22
|
}, function (props) {
|
|
23
|
-
return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
23
|
+
return (props.variant === "secondary" || props.variant === "outlined") && (0, _styledComponents.css)(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
24
24
|
}, function (props) {
|
|
25
|
-
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,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
25
|
+
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,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
26
26
|
}, function (props) {
|
|
27
|
-
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,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
27
|
+
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,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
28
28
|
}, function (props) {
|
|
29
|
-
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,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
29
|
+
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,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
30
30
|
}, function (props) {
|
|
31
|
-
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);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
31
|
+
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);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
32
32
|
}, function (props) {
|
|
33
33
|
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;"]));
|
|
34
34
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"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: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &: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 &:focus {\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 &:focus {\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 &:focus {\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 &:focus {\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 &:focus {\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\n &:hover,\n &:focus {\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"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAM5C,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,0jBACrCC,oBAAS,EACTC,8BAAc,EAqCd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,QACtBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,QACpBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC7DD,qBAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","props","size","css","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"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: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &: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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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\n &:hover,\n &:focus-visible {\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"],"mappings":";;;;;;;AAAA;AAEA;AACA;AAAmD;AAAA;AAM5C,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,0jBACrCC,oBAAS,EACTC,8BAAc,EAqCd,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,QACtBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,QACpBC,qBAAG,mBAEF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC7DD,qBAAG,0VAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,WAAW,IAAIH,KAAK,CAACG,OAAO,KAAK,UAAU,SAC9DD,qBAAG,kWAkBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,OAAO,KAAK,kBAAkB,QACpCD,qBAAG,mNAcF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,UAAU,IAAIH,KAAK,CAACG,OAAO,KAAK,cAAc,SACjED,qBAAG,iOAcF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,QAAQ,IAAIH,KAAK,CAACG,OAAO,KAAK,WAAW,SAC5DD,qBAAG,yRAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,OAAO,KAAK,eAAe,QACjCD,qBAAG,+SAgBF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACI,QAAQ,QACdF,qBAAG,yGAOC,CAACF,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,SACjDC,qBAAG,0CAEF,EAECF,KAAK,CAACC,IAAI,KAAK,OAAO,QACxBC,qBAAG,kBAEF,EAECF,KAAK,CAACC,IAAI,KAAK,KAAK,QACtBC,qBAAG,kBAEF,CACF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,SAAS,IAC1BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,UAAU,SAC9BD,qBAAG,oIAQC,CAACF,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,SACjDC,qBAAG,0CAEF,CACF;AAAA,GAED,UAACF,KAAK;EAAA,OACN,CAACA,KAAK,CAACG,OAAO,KAAK,UAAU,IAC3BH,KAAK,CAACG,OAAO,KAAK,cAAc,IAChCH,KAAK,CAACG,OAAO,KAAK,QAAQ,IAC1BH,KAAK,CAACG,OAAO,KAAK,WAAW,IAC7BH,KAAK,CAACG,OAAO,KAAK,kBAAkB,SACtCD,qBAAG,yIAOCF,KAAK,CAACC,IAAI,KAAK,OAAO,QACxBC,qBAAG,oCAEF,EACCF,KAAK,CAACC,IAAI,KAAK,KAAK,QACtBC,qBAAG,oCAEF,CACF;AAAA,EACJ;AAAC;AAEFP,YAAY,CAACU,WAAW,GAAG,cAAc;AAElC,IAAMC,oBAAoB,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,wCAG9C;AAAC;AAEFD,oBAAoB,CAACD,WAAW,GAAG,sBAAsB;AAElD,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8CAK7C;AAAC;AAEFC,mBAAmB,CAACH,WAAW,GAAG,qBAAqB"}
|
|
@@ -39,7 +39,7 @@ StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
|
39
39
|
var StyledCounterButtonReset = (0, _styledComponents.default)(_Button.Button).withConfig({
|
|
40
40
|
displayName: "Styles__StyledCounterButtonReset",
|
|
41
41
|
componentId: "sc-1ecrcba-3"
|
|
42
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
42
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
43
43
|
exports.StyledCounterButtonReset = StyledCounterButtonReset;
|
|
44
44
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
45
45
|
var StyledCounterButtonLabel = (0, _styledComponents.default)(_Body.Body2).withConfig({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyC;AAAA;AAOlC,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,iGAUF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,wGAIF;AAAA,EACJ;AAAC;AAEFJ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMO,0BAA0B,GAAGX,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAAC;AAEFU,0BAA0B,CAACP,WAAW,GAAG,4BAA4B;AAE9D,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledCounterButtonWrapper","styled","div","FontStyle","BoxSizingStyle","displayName","StyledCounterButton","Button","props","$active","css","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel","Body2"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":";;;;;;;AAAA;AAEA;AACA;AACA;AACA;AAAyC;AAAA;AAOlC,IAAMA,0BAA0B,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXC,oBAAS,EACTC,8BAAc,CAEjB;AAAC;AAEFJ,0BAA0B,CAACK,WAAW,GAAG,4BAA4B;AAE9D,IAAMC,mBAAmB,GAAG,IAAAL,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,iGAUF;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,SAAS,QACfD,qBAAG,wGAIF;AAAA,EACJ;AAAC;AAEFJ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEhD,IAAMO,0BAA0B,GAAGX,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAAC;AAEFU,0BAA0B,CAACP,WAAW,GAAG,4BAA4B;AAE9D,IAAMQ,wBAAwB,GAAG,IAAAZ,yBAAM,EAACM,cAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAAC;AAEFM,wBAAwB,CAACR,WAAW,GAAG,0BAA0B;AAE1D,IAAMS,wBAAwB,GAAG,IAAAb,yBAAM,EAACc,WAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BT,mBAAmB,EACjB,UAACE,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,QACdC,qBAAG,oCAEF;AAAA,GAGH,UAACF,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,QACbC,qBAAG,kCAEF;AAAA,EACJ;AAAC;AAEFI,wBAAwB,CAACT,WAAW,GAAG,0BAA0B"}
|
|
@@ -9,6 +9,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
|
9
9
|
var _ButtonGroup = require("../../ButtonGroup");
|
|
10
10
|
var _FontStyle = require("../../FontStyle");
|
|
11
11
|
var _BoxSizingStyle = require("../../BoxSizingStyle");
|
|
12
|
+
var _BreakPoints = require("../../BreakPoints");
|
|
12
13
|
var _Menu = require("../../Menu");
|
|
13
14
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
14
15
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
@@ -56,7 +57,7 @@ exports.StyledSpan = StyledSpan;
|
|
|
56
57
|
var StyledDiv = _styledComponents.default.div.withConfig({
|
|
57
58
|
displayName: "Styles__StyledDiv",
|
|
58
59
|
componentId: "sc-1v8h7mt-4"
|
|
59
|
-
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
60
|
+
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
60
61
|
return props.$isTargetable && (0, _styledComponents.css)(["", ""], {
|
|
61
62
|
"pointerEvents": "none"
|
|
62
63
|
});
|
|
@@ -79,7 +80,7 @@ var StyledDiv = _styledComponents.default.div.withConfig({
|
|
|
79
80
|
"cursor": "pointer",
|
|
80
81
|
"borderWidth": "1px",
|
|
81
82
|
"borderStyle": "solid"
|
|
82
|
-
});
|
|
83
|
+
}, _BreakPoints.screen.md);
|
|
83
84
|
exports.StyledDiv = StyledDiv;
|
|
84
85
|
StyledButtonGroup.displayName = "StyledButtonGroup";
|
|
85
86
|
StyledSpan.displayName = "StyledSpan";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","StyledMenu","Menu","StyledButtonGroup","ButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","css","$isRounded","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-relative\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-text-center\n `}\n\n color: var(--color-theme-700);\n margin: 0;\n padding: 0;\n background: none;\n width: 100%;\n height: auto;\n border: none;\n height: 30px;\n line-height: 1;\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\nexport const StyledMenu = styled(Menu)`\n ${tw`\n tw-w-auto\n tw-h-auto\n tw-py-4\n tw-px-2\n `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n ${FontStyle}\n ${BoxSizingStyle}\n\n button:hover {\n position: relative;\n z-index: 1;\n }\n`;\n\nexport const StyledSpan = styled.span`\n line-height: 30px;\n color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n $isTargetable: boolean;\n $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n ${(props) =>\n props.$isTargetable &&\n css`\n ${tw`tw-pointer-events-none`}\n `}\n\n ${(props) =>\n props.$isRounded &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n\n ${tw`\n tw-relative\n tw-text-center\n tw-p-0\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-border\n tw-border-solid\n `}\n\n height: 32px;\n transition: all 0.3s ease;\n background-color: transparent;\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n margin-right: -1px;\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 &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n text-decoration: none;\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\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AAEA;AAAkC;AAAA;AAE3B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,kVACrCC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAAC;AAEK,IAAMC,UAAU,GAAG,IAAAJ,yBAAM,EAACK,UAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAAC;AAEK,IAAMC,iBAAiB,GAAG,IAAAN,yBAAM,EAACO,wBAAW,CAAC;EAAA;EAAA;AAAA,6DAChDL,oBAAS,EACTC,8BAAc,CAMjB;AAAC;AAEK,IAAMK,UAAU,GAAGR,yBAAM,CAACS,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAAC;AAOK,IAAMC,SAAS,GAAGV,yBAAM,CAACW,GAAG;EAAA;EAAA;AAAA,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["StyledButton","styled","button","FontStyle","BoxSizingStyle","StyledMenu","Menu","StyledButtonGroup","ButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","css","$isRounded","screen","md","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-relative\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-text-center\n `}\n\n color: var(--color-theme-700);\n margin: 0;\n padding: 0;\n background: none;\n width: 100%;\n height: auto;\n border: none;\n height: 30px;\n line-height: 1;\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\nexport const StyledMenu = styled(Menu)`\n ${tw`\n tw-w-auto\n tw-h-auto\n tw-py-4\n tw-px-2\n `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n ${FontStyle}\n ${BoxSizingStyle}\n\n button:hover {\n position: relative;\n z-index: 1;\n }\n`;\n\nexport const StyledSpan = styled.span`\n line-height: 30px;\n color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n $isTargetable: boolean;\n $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n ${(props) =>\n props.$isTargetable &&\n css`\n ${tw`tw-pointer-events-none`}\n `}\n\n ${(props) =>\n props.$isRounded &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n\n ${tw`\n tw-relative\n tw-text-center\n tw-p-0\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-border\n tw-border-solid\n `}\n\n height: 32px;\n transition: all 0.3s ease;\n background-color: transparent;\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n margin-right: -1px;\n display: none;\n\n ${screen.md} {\n display: block;\n }\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 &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n text-decoration: none;\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\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAEA;AAAkC;AAAA;AAE3B,IAAMA,YAAY,GAAGC,yBAAM,CAACC,MAAM;EAAA;EAAA;AAAA,kVACrCC,oBAAS,EACTC,8BAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAAC;AAEK,IAAMC,UAAU,GAAG,IAAAJ,yBAAM,EAACK,UAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAAC;AAEK,IAAMC,iBAAiB,GAAG,IAAAN,yBAAM,EAACO,wBAAW,CAAC;EAAA;EAAA;AAAA,6DAChDL,oBAAS,EACTC,8BAAc,CAMjB;AAAC;AAEK,IAAMK,UAAU,GAAGR,yBAAM,CAACS,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAAC;AAOK,IAAMC,SAAS,GAAGV,yBAAM,CAACW,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,QACnBC,qBAAG,YACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACF,KAAK;EAAA,OACNA,KAAK,CAACG,UAAU,QAChBD,qBAAG,0CAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCE,mBAAM,CAACC,EAAE,CAiCZ;AAAC;AAEFX,iBAAiB,CAACY,WAAW,GAAG,mBAAmB;AACnDV,UAAU,CAACU,WAAW,GAAG,YAAY;AACrCR,SAAS,CAACQ,WAAW,GAAG,WAAW;AACnCd,UAAU,CAACc,WAAW,GAAG,YAAY;AACrCnB,YAAY,CAACmB,WAAW,GAAG,cAAc"}
|
|
@@ -9,17 +9,17 @@ export var StyledButton = styled.button.withConfig({
|
|
|
9
9
|
}, function (props) {
|
|
10
10
|
return props.size === "big" && css(["height:40px;"]);
|
|
11
11
|
}, function (props) {
|
|
12
|
-
return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
12
|
+
return (props.variant === "primary" || props.variant === "contained") && css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
13
13
|
}, function (props) {
|
|
14
|
-
return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
14
|
+
return (props.variant === "secondary" || props.variant === "outlined") && css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
15
15
|
}, function (props) {
|
|
16
|
-
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,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
16
|
+
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,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
17
17
|
}, function (props) {
|
|
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,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
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,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
19
19
|
}, function (props) {
|
|
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,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
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,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
21
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);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
22
|
+
return props.variant === "circle raised" && css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
23
23
|
}, function (props) {
|
|
24
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;"]));
|
|
25
25
|
}, function (props) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"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: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &: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 &:focus {\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 &:focus {\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 &:focus {\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 &:focus {\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 &:focus {\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\n &:hover,\n &:focus {\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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM;EAAA;EAAA;AAAA,0jBACrCH,SAAS,EACTC,cAAc,EAqCd,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC7DP,GAAG,
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledButton","button","props","size","variant","iconOnly","displayName","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"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: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n border-color 0.3s ease;\n\n svg {\n fill: currentColor;\n }\n\n &: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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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 &:focus-visible {\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\n &:hover,\n &:focus-visible {\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"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,mBAAmB;AAMlD,OAAO,IAAMC,YAAY,GAAGJ,MAAM,CAACK,MAAM;EAAA;EAAA;AAAA,0jBACrCH,SAAS,EACTC,cAAc,EAqCd,UAACG,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,OAAO,IACtBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACC,IAAI,KAAK,KAAK,IACpBN,GAAG,kBAEF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC7DP,GAAG,yVAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,WAAW,IAAIF,KAAK,CAACE,OAAO,KAAK,UAAU,KAC9DP,GAAG,iWAkBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,OAAO,KAAK,kBAAkB,IACpCP,GAAG,kNAcF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,UAAU,IAAIF,KAAK,CAACE,OAAO,KAAK,cAAc,KACjEP,GAAG,gOAcF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,QAAQ,IAAIF,KAAK,CAACE,OAAO,KAAK,WAAW,KAC5DP,GAAG,wRAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACE,OAAO,KAAK,eAAe,IACjCP,GAAG,8SAgBF;AAAA,GAED,UAACK,KAAK;EAAA,OACNA,KAAK,CAACG,QAAQ,IACdR,GAAG,wGAOC,CAACK,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,KACjDN,GAAG,yCAEF,EAECK,KAAK,CAACC,IAAI,KAAK,OAAO,IACxBN,GAAG,iBAEF,EAECK,KAAK,CAACC,IAAI,KAAK,KAAK,IACtBN,GAAG,iBAEF,CACF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,SAAS,IAC1BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,UAAU,KAC9BP,GAAG,mIAQC,CAACK,KAAK,CAACC,IAAI,KAAK,OAAO,IAAID,KAAK,CAACC,IAAI,KAAK,KAAK,KACjDN,GAAG,yCAEF,CACF;AAAA,GAED,UAACK,KAAK;EAAA,OACN,CAACA,KAAK,CAACE,OAAO,KAAK,UAAU,IAC3BF,KAAK,CAACE,OAAO,KAAK,cAAc,IAChCF,KAAK,CAACE,OAAO,KAAK,QAAQ,IAC1BF,KAAK,CAACE,OAAO,KAAK,WAAW,IAC7BF,KAAK,CAACE,OAAO,KAAK,kBAAkB,KACtCP,GAAG,wIAOCK,KAAK,CAACC,IAAI,KAAK,OAAO,IACxBN,GAAG,mCAEF,EACCK,KAAK,CAACC,IAAI,KAAK,KAAK,IACtBN,GAAG,mCAEF,CACF;AAAA,EACJ;AAEDG,YAAY,CAACM,WAAW,GAAG,cAAc;AAEzC,OAAO,IAAMC,oBAAoB,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,wCAG9C;AAEDD,oBAAoB,CAACD,WAAW,GAAG,sBAAsB;AAEzD,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,8CAK7C;AAEDC,mBAAmB,CAACH,WAAW,GAAG,qBAAqB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CounterButton/Styles.ts"],"names":[],"mappings":";AAOA,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,0BAA0B,oEAKtC,CAAC;AAIF,eAAO,MAAM,mBAAmB,0NAsB/B,CAAC;AAIF,eAAO,MAAM,0BAA0B;;SAWtC,CAAC;AAIF,eAAO,MAAM,wBAAwB,oMAWpC,CAAC;AAIF,eAAO,MAAM,wBAAwB;;SAgBpC,CAAC"}
|
|
@@ -27,7 +27,7 @@ StyledCounterButtonCounter.displayName = "StyledCounterButtonCounter";
|
|
|
27
27
|
export var StyledCounterButtonReset = styled(Button).withConfig({
|
|
28
28
|
displayName: "Styles__StyledCounterButtonReset",
|
|
29
29
|
componentId: "sc-1ecrcba-3"
|
|
30
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
30
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
31
31
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
32
32
|
export var StyledCounterButtonLabel = styled(Body2).withConfig({
|
|
33
33
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXF,SAAS,EACTD,cAAc,CAEjB;AAEDE,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACO,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,gGAUF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfX,GAAG,uGAIF;AAAA,EACJ;AAEDQ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMK,0BAA0B,GAAGb,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAEDM,0BAA0B,CAACL,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMM,wBAAwB,GAAGd,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","Body2","Button","BoxSizingStyle","FontStyle","StyledCounterButtonWrapper","div","displayName","StyledCounterButton","props","$active","$selected","StyledCounterButtonCounter","StyledCounterButtonReset","StyledCounterButtonLabel"],"sources":["../../../../src/components/CounterButton/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { Body2 } from \"../Typography/Variants/Body2\";\nimport { Button } from \"../Button/Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledCounterButtonProps {\n $active?: boolean;\n $selected?: boolean;\n}\n\nexport const StyledCounterButtonWrapper = styled.div`\n ${tw`tw-flex`}\n ${FontStyle}\n ${BoxSizingStyle}\n width: fit-content;\n`;\n\nStyledCounterButtonWrapper.displayName = \"StyledCounterButtonWrapper\";\n\nexport const StyledCounterButton = styled(Button)<StyledCounterButtonProps>`\n ${(props) =>\n props.$active &&\n css`\n padding: 0 8px;\n\n svg {\n fill: var(--color-primary);\n }\n\n &:hover {\n background: var(--color-primary-300);\n }\n `}\n\n ${(props) =>\n props.$selected &&\n css`\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n background-color: var(--color-primary-200);\n `}\n`;\n\nStyledCounterButton.displayName = \"StyledCounterButton\";\n\nexport const StyledCounterButtonCounter = styled.div<{ $selected?: boolean }>`\n border-radius: 50%;\n background-color: var(--color-primary);\n color: var(--page-paper-main);\n line-height: 15px;\n width: 15px;\n font-weight: bold;\n font-size: 10px;\n text-align: center;\n margin-left: 4px;\n margin-right: -6px;\n`;\n\nStyledCounterButtonCounter.displayName = \"StyledCounterButtonCounter\";\n\nexport const StyledCounterButtonReset = styled(Button)`\n background-color: var(--color-primary-200);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n\n &:hover,\n &:focus-visible {\n background-color: var(--color-primary-300);\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nStyledCounterButtonReset.displayName = \"StyledCounterButtonReset\";\n\nexport const StyledCounterButtonLabel = styled(Body2)<{ $active?: boolean }>`\n ${tw`tw-pointer-events-none`}\n\n ${StyledCounterButton}:hover && {\n ${(props) =>\n !props.$active &&\n css`\n color: var(--color-theme-900);\n `}\n }\n\n ${(props) =>\n props.$active &&\n css`\n color: var(--color-primary);\n `}\n`;\n\nStyledCounterButtonLabel.displayName = \"StyledCounterButtonLabel\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,KAAK,QAAQ,8BAA8B;AACpD,SAASC,MAAM,QAAQ,kBAAkB;AACzC,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,SAAS,QAAQ,cAAc;AAOxC,OAAO,IAAMC,0BAA0B,GAAGN,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,0CAC9C;EAAA;AAAQ,CAAC,EACXF,SAAS,EACTD,cAAc,CAEjB;AAEDE,0BAA0B,CAACE,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMC,mBAAmB,GAAGT,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,kBAC7C,UAACO,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,gGAUF;AAAA,GAED,UAACS,KAAK;EAAA,OACNA,KAAK,CAACE,SAAS,IACfX,GAAG,uGAIF;AAAA,EACJ;AAEDQ,mBAAmB,CAACD,WAAW,GAAG,qBAAqB;AAEvD,OAAO,IAAMK,0BAA0B,GAAGb,MAAM,CAACO,GAAG;EAAA;EAAA;AAAA,6MAWnD;AAEDM,0BAA0B,CAACL,WAAW,GAAG,4BAA4B;AAErE,OAAO,IAAMM,wBAAwB,GAAGd,MAAM,CAACG,MAAM,CAAC;EAAA;EAAA;AAAA,+NAWrD;AAEDW,wBAAwB,CAACN,WAAW,GAAG,0BAA0B;AAEjE,OAAO,IAAMO,wBAAwB,GAAGf,MAAM,CAACE,KAAK,CAAC;EAAA;EAAA;AAAA,qCAC/C;EAAA;AAAuB,CAAC,EAE1BO,mBAAmB,EACjB,UAACC,KAAK;EAAA,OACN,CAACA,KAAK,CAACC,OAAO,IACdV,GAAG,mCAEF;AAAA,GAGH,UAACS,KAAK;EAAA,OACNA,KAAK,CAACC,OAAO,IACbV,GAAG,iCAEF;AAAA,EACJ;AAEDc,wBAAwB,CAACP,WAAW,GAAG,0BAA0B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,YAAY,uEAmDxB,CAAC;AAEF,eAAO,MAAM,UAAU,6GAOtB,CAAC;AAEF,eAAO,MAAM,iBAAiB,6wJAQ7B,CAAC;AAEF,eAAO,MAAM,UAAU,qEAGtB,CAAC;AAEF,UAAU,SAAS;IACjB,aAAa,EAAE,OAAO,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,SAAS,2EAwErB,CAAC"}
|
|
@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
|
|
|
2
2
|
import { ButtonGroup } from "../../ButtonGroup";
|
|
3
3
|
import { FontStyle } from "../../FontStyle";
|
|
4
4
|
import { BoxSizingStyle } from "../../BoxSizingStyle";
|
|
5
|
+
import { screen } from "../../BreakPoints";
|
|
5
6
|
import { Menu } from "../../Menu";
|
|
6
7
|
export var StyledButton = styled.button.withConfig({
|
|
7
8
|
displayName: "Styles__StyledButton",
|
|
@@ -43,7 +44,7 @@ export var StyledSpan = styled.span.withConfig({
|
|
|
43
44
|
export var StyledDiv = styled.div.withConfig({
|
|
44
45
|
displayName: "Styles__StyledDiv",
|
|
45
46
|
componentId: "sc-1v8h7mt-4"
|
|
46
|
-
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
47
|
+
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
47
48
|
return props.$isTargetable && css(["", ""], {
|
|
48
49
|
"pointerEvents": "none"
|
|
49
50
|
});
|
|
@@ -66,7 +67,7 @@ export var StyledDiv = styled.div.withConfig({
|
|
|
66
67
|
"cursor": "pointer",
|
|
67
68
|
"borderWidth": "1px",
|
|
68
69
|
"borderStyle": "solid"
|
|
69
|
-
});
|
|
70
|
+
}, screen.md);
|
|
70
71
|
StyledButtonGroup.displayName = "StyledButtonGroup";
|
|
71
72
|
StyledSpan.displayName = "StyledSpan";
|
|
72
73
|
StyledDiv.displayName = "StyledDiv";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","Menu","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-relative\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-text-center\n `}\n\n color: var(--color-theme-700);\n margin: 0;\n padding: 0;\n background: none;\n width: 100%;\n height: auto;\n border: none;\n height: 30px;\n line-height: 1;\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\nexport const StyledMenu = styled(Menu)`\n ${tw`\n tw-w-auto\n tw-h-auto\n tw-py-4\n tw-px-2\n `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n ${FontStyle}\n ${BoxSizingStyle}\n\n button:hover {\n position: relative;\n z-index: 1;\n }\n`;\n\nexport const StyledSpan = styled.span`\n line-height: 30px;\n color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n $isTargetable: boolean;\n $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n ${(props) =>\n props.$isTargetable &&\n css`\n ${tw`tw-pointer-events-none`}\n `}\n\n ${(props) =>\n props.$isRounded &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n\n ${tw`\n tw-relative\n tw-text-center\n tw-p-0\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-border\n tw-border-solid\n `}\n\n height: 32px;\n transition: all 0.3s ease;\n background-color: transparent;\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n margin-right: -1px;\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 &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n text-decoration: none;\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\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","ButtonGroup","FontStyle","BoxSizingStyle","screen","Menu","StyledButton","button","StyledMenu","StyledButtonGroup","StyledSpan","span","StyledDiv","div","props","$isTargetable","$isRounded","md","displayName"],"sources":["../../../../../src/components/Steppers/DateStepper/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { ButtonGroup } from \"../../ButtonGroup\";\nimport { FontStyle } from \"../../FontStyle\";\nimport { BoxSizingStyle } from \"../../BoxSizingStyle\";\nimport { screen } from \"../../BreakPoints\";\nimport tw from \"twin.macro\";\nimport { Menu } from \"../../Menu\";\n\nexport const StyledButton = styled.button`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`\n tw-relative\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-text-center\n `}\n\n color: var(--color-theme-700);\n margin: 0;\n padding: 0;\n background: none;\n width: 100%;\n height: auto;\n border: none;\n height: 30px;\n line-height: 1;\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\nexport const StyledMenu = styled(Menu)`\n ${tw`\n tw-w-auto\n tw-h-auto\n tw-py-4\n tw-px-2\n `}\n`;\n\nexport const StyledButtonGroup = styled(ButtonGroup)`\n ${FontStyle}\n ${BoxSizingStyle}\n\n button:hover {\n position: relative;\n z-index: 1;\n }\n`;\n\nexport const StyledSpan = styled.span`\n line-height: 30px;\n color: var(--color-theme-700);\n`;\n\ninterface StyledDiv {\n $isTargetable: boolean;\n $isRounded: boolean;\n}\n\nexport const StyledDiv = styled.div<StyledDiv>`\n ${(props) =>\n props.$isTargetable &&\n css`\n ${tw`tw-pointer-events-none`}\n `}\n\n ${(props) =>\n props.$isRounded &&\n css`\n border-radius: var(--ac-br-rounded);\n `}\n\n ${tw`\n tw-relative\n tw-text-center\n tw-p-0\n tw-antialiased\n tw-align-middle\n tw-font-medium\n tw-inline-block\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-border\n tw-border-solid\n `}\n\n height: 32px;\n transition: all 0.3s ease;\n background-color: transparent;\n border: solid 1px var(--color-theme-700);\n color: var(--color-theme-700);\n margin-right: -1px;\n display: none;\n\n ${screen.md} {\n display: block;\n }\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 &:disabled {\n cursor: default;\n opacity: 50%;\n pointer-events: none;\n }\n\n &:hover {\n border-color: var(--color-primary);\n color: var(--color-primary);\n text-decoration: none;\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\nStyledButtonGroup.displayName = \"StyledButtonGroup\";\nStyledSpan.displayName = \"StyledSpan\";\nStyledDiv.displayName = \"StyledDiv\";\nStyledMenu.displayName = \"StyledMenu\";\nStyledButton.displayName = \"StyledButton\";\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,cAAc,QAAQ,sBAAsB;AACrD,SAASC,MAAM,QAAQ,mBAAmB;AAE1C,SAASC,IAAI,QAAQ,YAAY;AAEjC,OAAO,IAAMC,YAAY,GAAGP,MAAM,CAACQ,MAAM;EAAA;EAAA;AAAA,kVACrCL,SAAS,EACTC,cAAc,EAEZ;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAaJ,CAAC,CAkCF;AAED,OAAO,IAAMK,UAAU,GAAGT,MAAM,CAACM,IAAI,CAAC;EAAA;EAAA;AAAA,aAChC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAKJ,CAAC,CACF;AAED,OAAO,IAAMI,iBAAiB,GAAGV,MAAM,CAACE,WAAW,CAAC;EAAA;EAAA;AAAA,6DAChDC,SAAS,EACTC,cAAc,CAMjB;AAED,OAAO,IAAMO,UAAU,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,sDAGpC;AAOD,OAAO,IAAMC,SAAS,GAAGb,MAAM,CAACc,GAAG;EAAA;EAAA;AAAA,oiBAC/B,UAACC,KAAK;EAAA,OACNA,KAAK,CAACC,aAAa,IACnBf,GAAG,WACG;IAAA;EAAuB,CAAC,CAC7B;AAAA,GAED,UAACc,KAAK;EAAA,OACNA,KAAK,CAACE,UAAU,IAChBhB,GAAG,yCAEF;AAAA,GAEC;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAgBJ,CAAC,EAUCI,MAAM,CAACa,EAAE,CAiCZ;AAEDR,iBAAiB,CAACS,WAAW,GAAG,mBAAmB;AACnDR,UAAU,CAACQ,WAAW,GAAG,YAAY;AACrCN,SAAS,CAACM,WAAW,GAAG,WAAW;AACnCV,UAAU,CAACU,WAAW,GAAG,YAAY;AACrCZ,YAAY,CAACY,WAAW,GAAG,cAAc"}
|
package/dist/index.js
CHANGED
|
@@ -237,17 +237,17 @@
|
|
|
237
237
|
}, function (props) {
|
|
238
238
|
return props.size === "big" && styled.css(["height:40px;"]);
|
|
239
239
|
}, function (props) {
|
|
240
|
-
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
240
|
+
return (props.variant === "primary" || props.variant === "contained") && styled.css(["padding:0 16px;background-color:var(--color-primary);border-radius:var(--ac-br-rounded);color:var(--page-paper-main);&:hover,&:focus-visible{box-shadow:0 3px 6px -2px var(--color-primary-500);background-color:var(--color-primary-800);}&:active{box-shadow:0 4px 10px -2px var(--color-primary-600);background-color:var(--color-primary-800);}"]);
|
|
241
241
|
}, function (props) {
|
|
242
|
-
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
242
|
+
return (props.variant === "secondary" || props.variant === "outlined") && styled.css(["padding:0 16px;background-color:transparent;border-radius:var(--ac-br-rounded);border:solid 1px var(--color-theme-700);color:var(--color-theme-700);&:hover,&:focus-visible{border-color:var(--color-primary);color:var(--color-primary);}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"]);
|
|
243
243
|
}, function (props) {
|
|
244
|
-
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
244
|
+
return props.variant === "dark transparent" && styled.css(["padding:0 8px;background-color:rgba(0,0,0,0.5);border-radius:var(--ac-br-6);color:var(--only-white);&:hover,&:focus-visible{background-color:rgba(0,0,0,0.85);}&:active{background-color:var(--only-black);}"]);
|
|
245
245
|
}, function (props) {
|
|
246
|
-
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
246
|
+
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-primary);&:hover,&:focus-visible{background-color:var(--color-primary-200);}&:active{background-color:var(--color-primary-300);}"]);
|
|
247
247
|
}, function (props) {
|
|
248
|
-
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
248
|
+
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 8px;background-color:transparent;border-radius:var(--ac-br-6);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--color-theme-300);color:var(--color-theme-900);}&:active{background-color:var(--color-theme-400);color:var(--color-theme-900);}"]);
|
|
249
249
|
}, function (props) {
|
|
250
|
-
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
250
|
+
return props.variant === "circle raised" && styled.css(["padding:0 6px;background-color:transparent;border-radius:var(--ac-br-rounded);color:var(--color-theme-700);&:hover,&:focus-visible{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary);}&:active{background-color:var(--page-paper-main);box-shadow:var(--shadow-tertiary-hover);}"]);
|
|
251
251
|
}, function (props) {
|
|
252
252
|
return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;", ";", " ", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]), props.size === "small" && styled.css(["width:24px;"]), props.size === "big" && styled.css(["width:40px;"]));
|
|
253
253
|
}, function (props) {
|
|
@@ -4192,7 +4192,7 @@
|
|
|
4192
4192
|
var StyledCounterButtonReset = styled__default["default"](Button).withConfig({
|
|
4193
4193
|
displayName: "Styles__StyledCounterButtonReset",
|
|
4194
4194
|
componentId: "sc-1ecrcba-3"
|
|
4195
|
-
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
4195
|
+
})(["background-color:var(--color-primary-200);border-top-left-radius:0;border-bottom-left-radius:0;&:hover,&:focus-visible{background-color:var(--color-primary-300);border-top-left-radius:0;border-bottom-left-radius:0;}"]);
|
|
4196
4196
|
StyledCounterButtonReset.displayName = "StyledCounterButtonReset";
|
|
4197
4197
|
var StyledCounterButtonLabel = styled__default["default"](Body2).withConfig({
|
|
4198
4198
|
displayName: "Styles__StyledCounterButtonLabel",
|
|
@@ -4838,6 +4838,21 @@
|
|
|
4838
4838
|
};
|
|
4839
4839
|
DatePicker.displayName = "DatePicker";
|
|
4840
4840
|
|
|
4841
|
+
var size = {
|
|
4842
|
+
sm: "640px",
|
|
4843
|
+
md: "768px",
|
|
4844
|
+
lg: "1024px",
|
|
4845
|
+
xl: "1280px",
|
|
4846
|
+
xxl: "1536px"
|
|
4847
|
+
};
|
|
4848
|
+
var screen = {
|
|
4849
|
+
sm: "@media (min-width: ".concat(size.sm, ")"),
|
|
4850
|
+
md: "@media (min-width: ".concat(size.md, ")"),
|
|
4851
|
+
lg: "@media (min-width: ".concat(size.lg, ")"),
|
|
4852
|
+
xl: "@media (min-width: ".concat(size.xl, ")"),
|
|
4853
|
+
xxl: "@media (min-width: ".concat(size.xxl, ")")
|
|
4854
|
+
};
|
|
4855
|
+
|
|
4841
4856
|
var StyledButton$1 = styled__default["default"].button.withConfig({
|
|
4842
4857
|
displayName: "Styles__StyledButton",
|
|
4843
4858
|
componentId: "sc-1v8h7mt-0"
|
|
@@ -4878,7 +4893,7 @@
|
|
|
4878
4893
|
var StyledDiv$1 = styled__default["default"].div.withConfig({
|
|
4879
4894
|
displayName: "Styles__StyledDiv",
|
|
4880
4895
|
componentId: "sc-1v8h7mt-4"
|
|
4881
|
-
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
4896
|
+
})(["", " ", " ", " height:32px;transition:all 0.3s ease;background-color:transparent;border:solid 1px var(--color-theme-700);color:var(--color-theme-700);margin-right:-1px;display:none;", "{display:block;}svg{fill:currentColor;}&::-moz-focus-inner{border:0;}&:focus{outline:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}&:hover{border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;}&:active{border-color:var(--color-primary);color:var(--color-primary);background-color:var(--color-primary-200);}"], function (props) {
|
|
4882
4897
|
return props.$isTargetable && styled.css(["", ""], {
|
|
4883
4898
|
"pointerEvents": "none"
|
|
4884
4899
|
});
|
|
@@ -4901,7 +4916,7 @@
|
|
|
4901
4916
|
"cursor": "pointer",
|
|
4902
4917
|
"borderWidth": "1px",
|
|
4903
4918
|
"borderStyle": "solid"
|
|
4904
|
-
});
|
|
4919
|
+
}, screen.md);
|
|
4905
4920
|
StyledButtonGroup.displayName = "StyledButtonGroup";
|
|
4906
4921
|
StyledSpan$1.displayName = "StyledSpan";
|
|
4907
4922
|
StyledDiv$1.displayName = "StyledDiv";
|
|
@@ -9148,21 +9163,6 @@
|
|
|
9148
9163
|
};
|
|
9149
9164
|
SlideFromTop.displayName = "SlideFromTop";
|
|
9150
9165
|
|
|
9151
|
-
var size = {
|
|
9152
|
-
sm: "640px",
|
|
9153
|
-
md: "768px",
|
|
9154
|
-
lg: "1024px",
|
|
9155
|
-
xl: "1280px",
|
|
9156
|
-
xxl: "1536px"
|
|
9157
|
-
};
|
|
9158
|
-
var screen = {
|
|
9159
|
-
sm: "@media (min-width: ".concat(size.sm, ")"),
|
|
9160
|
-
md: "@media (min-width: ".concat(size.md, ")"),
|
|
9161
|
-
lg: "@media (min-width: ".concat(size.lg, ")"),
|
|
9162
|
-
xl: "@media (min-width: ".concat(size.xl, ")"),
|
|
9163
|
-
xxl: "@media (min-width: ".concat(size.xxl, ")")
|
|
9164
|
-
};
|
|
9165
|
-
|
|
9166
9166
|
var StyledDialog = styled__default["default"].div.withConfig({
|
|
9167
9167
|
displayName: "Styles__StyledDialog",
|
|
9168
9168
|
componentId: "sc-jwpvgm-0"
|