@activecollab/components 2.0.446 → 2.0.447
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/Avatar/Avatar.js +15 -5
- package/dist/cjs/components/Avatar/Avatar.js.map +1 -1
- package/dist/cjs/components/Bubble/Styles.js +2 -2
- package/dist/cjs/components/Bubble/Styles.js.map +1 -1
- package/dist/cjs/components/Button/Button.js +4 -1
- package/dist/cjs/components/Button/Button.js.map +1 -1
- package/dist/cjs/components/Button/Styles.js +4 -4
- package/dist/cjs/components/Button/Styles.js.map +1 -1
- package/dist/esm/components/Avatar/Avatar.d.ts.map +1 -1
- package/dist/esm/components/Avatar/Avatar.js +15 -6
- package/dist/esm/components/Avatar/Avatar.js.map +1 -1
- package/dist/esm/components/Bubble/Styles.js +2 -2
- package/dist/esm/components/Bubble/Styles.js.map +1 -1
- package/dist/esm/components/Button/Button.d.ts +2 -0
- package/dist/esm/components/Button/Button.d.ts.map +1 -1
- package/dist/esm/components/Button/Button.js +4 -1
- package/dist/esm/components/Button/Button.js.map +1 -1
- package/dist/esm/components/Button/Styles.d.ts +1 -0
- package/dist/esm/components/Button/Styles.d.ts.map +1 -1
- package/dist/esm/components/Button/Styles.js +1 -1
- package/dist/esm/components/Button/Styles.js.map +1 -1
- package/dist/index.js +23 -12
- 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
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","variant","iconOnly","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\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 flex-shrink: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 288px;\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 ${(props) =>\n props.active &&\n css`\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 &:hover,\n &:focus-visible {\n color: var(--color-primary);\n }\n ${props.children instanceof Array &&\n css`\n background-color: var(--color-theme-300);\n `}\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":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"Styles.js","names":["styled","css","BoxSizingStyle","FontStyle","StyledButton","button","withConfig","displayName","componentId","props","size","variant","iconOnly","$inset","active","children","Array","StyledButtonElements","span","StyledButtonElement"],"sources":["../../../../src/components/Button/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ButtonProps } from \"./Button\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\ninterface StyledButtonProps extends ButtonProps {\n iconOnly: boolean;\n $inset?: ButtonProps[\"inset\"];\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 flex-shrink: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 288px;\n\n /* Empty space around the visible content of a button type. A page control group pulls the button in by --c-btn-inset. */\n --c-btn-text-inset: 8px;\n --c-btn-icon-inset: 8px;\n --c-btn-icon-tight-inset: 6px;\n --c-btn-inset: 0px;\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 var(--c-btn-text-inset);\n --c-btn-inset: var(--c-btn-text-inset);\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 var(--c-btn-text-inset);\n --c-btn-inset: var(--c-btn-text-inset);\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 --c-btn-inset: 0px;\n\n /* 4px of button stays empty around the 24px icon, plus the empty space the icon drawing keeps inside. */\n ${(props.variant === \"tertiary\" ||\n props.variant === \"text colored\" ||\n props.variant === \"option\" ||\n props.variant === \"text gray\") &&\n props.size !== \"small\" &&\n props.size !== \"big\" &&\n css`\n --c-btn-inset: ${props.$inset === \"tight\"\n ? \"var(--c-btn-icon-tight-inset)\"\n : \"var(--c-btn-icon-inset)\"};\n `}\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 ${(props) =>\n props.active &&\n css`\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 &:hover,\n &:focus-visible {\n color: var(--color-primary);\n }\n ${props.children instanceof Array &&\n css`\n background-color: var(--color-theme-300);\n `}\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":"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","ignoreList":[]}
|
package/dist/index.js
CHANGED
|
@@ -171,7 +171,7 @@
|
|
|
171
171
|
var StyledButton$2 = styled__default["default"].button.withConfig({
|
|
172
172
|
displayName: "Styles__StyledButton",
|
|
173
173
|
componentId: "sc-vi1kcr-0"
|
|
174
|
-
})(["", " ", " -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;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
174
|
+
})(["", " ", " -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;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:288px;--c-btn-text-inset:8px;--c-btn-icon-inset:8px;--c-btn-icon-tight-inset:6px;--c-btn-inset:0px;border:none;height:32px;transition:background-color 0.3s ease,box-shadow 0.3s ease,color 0.3s ease,border-color 0.3s ease;svg{fill:currentColor;}&:focus{outline:none;}&:hover{text-decoration:none;}&:disabled{cursor:default;opacity:50%;pointer-events:none;}", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", ""], FontStyle, BoxSizingStyle, function (props) {
|
|
175
175
|
return props.size === "small" && styled.css(["height:24px;"]);
|
|
176
176
|
}, function (props) {
|
|
177
177
|
return props.size === "big" && styled.css(["height:40px;"]);
|
|
@@ -182,13 +182,13 @@
|
|
|
182
182
|
}, function (props) {
|
|
183
183
|
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);}"]);
|
|
184
184
|
}, function (props) {
|
|
185
|
-
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0
|
|
185
|
+
return (props.variant === "tertiary" || props.variant === "text colored") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);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);}"]);
|
|
186
186
|
}, function (props) {
|
|
187
|
-
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0
|
|
187
|
+
return (props.variant === "option" || props.variant === "text gray") && styled.css(["padding:0 var(--c-btn-text-inset);--c-btn-inset:var(--c-btn-text-inset);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);}"]);
|
|
188
188
|
}, function (props) {
|
|
189
189
|
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);}"]);
|
|
190
190
|
}, function (props) {
|
|
191
|
-
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;"]));
|
|
191
|
+
return props.iconOnly && styled.css(["display:inline-flex;justify-content:center;align-items:center;padding:0;width:32px;--c-btn-inset:0px;", " ", ";", " ", ""], (props.variant === "tertiary" || props.variant === "text colored" || props.variant === "option" || props.variant === "text gray") && props.size !== "small" && props.size !== "big" && styled.css(["--c-btn-inset:", ";"], props.$inset === "tight" ? "var(--c-btn-icon-tight-inset)" : "var(--c-btn-icon-inset)"), (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;"]));
|
|
192
192
|
}, function (props) {
|
|
193
193
|
return (props.variant === "primary" || props.variant === "contained" || props.variant === "secondary" || props.variant === "outlined") && styled.css([".c-btn__elements__element:first-child svg{margin-left:-6px;}.c-btn__elements__element:last-child svg{margin-right:-6px;}", ""], (props.size === "small" || props.size === "big") && styled.css(["border-radius:var(--ac-br-rounded);"]));
|
|
194
194
|
}, function (props) {
|
|
@@ -208,7 +208,7 @@
|
|
|
208
208
|
})(["display:inline-flex;svg{margin:0 4px;}"]);
|
|
209
209
|
StyledButtonElement.displayName = "StyledButtonElement";
|
|
210
210
|
|
|
211
|
-
var _excluded$5Y = ["children", "active", "variant", "size", "type", "className"];
|
|
211
|
+
var _excluded$5Y = ["children", "active", "variant", "size", "type", "inset", "className"];
|
|
212
212
|
/**
|
|
213
213
|
* @component Button
|
|
214
214
|
* @description
|
|
@@ -240,6 +240,8 @@
|
|
|
240
240
|
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
241
241
|
_ref$type = _ref.type,
|
|
242
242
|
type = _ref$type === void 0 ? "button" : _ref$type,
|
|
243
|
+
_ref$inset = _ref.inset,
|
|
244
|
+
inset = _ref$inset === void 0 ? "default" : _ref$inset,
|
|
243
245
|
className = _ref.className,
|
|
244
246
|
args = _objectWithoutProperties(_ref, _excluded$5Y);
|
|
245
247
|
return /*#__PURE__*/React__default["default"].createElement(StyledButton$2, _extends({
|
|
@@ -258,6 +260,7 @@
|
|
|
258
260
|
variant: variant,
|
|
259
261
|
active: active,
|
|
260
262
|
size: size,
|
|
263
|
+
$inset: inset,
|
|
261
264
|
ref: ref,
|
|
262
265
|
"aria-pressed": active,
|
|
263
266
|
role: "button",
|
|
@@ -14592,8 +14595,8 @@
|
|
|
14592
14595
|
"backgroundColor": "rgb(255 255 255 / var(--tw-bg-opacity, 1))",
|
|
14593
14596
|
"color": "var(--color-theme-800)",
|
|
14594
14597
|
"opacity": "1",
|
|
14595
|
-
"--tw-shadow": "0
|
|
14596
|
-
"--tw-shadow-colored": "0
|
|
14598
|
+
"--tw-shadow": "0 25px 50px -12px rgb(0 0 0 / 0.25)",
|
|
14599
|
+
"--tw-shadow-colored": "0 25px 50px -12px var(--tw-shadow-color)",
|
|
14597
14600
|
"boxShadow": "var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)"
|
|
14598
14601
|
}, FontStyle, BoxSizingStyle);
|
|
14599
14602
|
StyledBubble.displayName = "StyledBubble";
|
|
@@ -19573,10 +19576,18 @@
|
|
|
19573
19576
|
_useState2 = _slicedToArray(_useState, 2),
|
|
19574
19577
|
imageLoaded = _useState2[0],
|
|
19575
19578
|
setImageLoaded = _useState2[1];
|
|
19579
|
+
var imageRef = React.useRef(null);
|
|
19580
|
+
var handleRef = useForkRef(ref, imageRef);
|
|
19581
|
+
React.useLayoutEffect(function () {
|
|
19582
|
+
var _imageRef$current;
|
|
19583
|
+
if ((_imageRef$current = imageRef.current) !== null && _imageRef$current !== void 0 && _imageRef$current.complete && imageRef.current.naturalWidth > 0) {
|
|
19584
|
+
setImageLoaded(true);
|
|
19585
|
+
}
|
|
19586
|
+
}, [url]);
|
|
19576
19587
|
return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$1, {
|
|
19577
19588
|
className: className
|
|
19578
19589
|
}, children, /*#__PURE__*/React__default["default"].createElement(StyledAvatar, _extends({
|
|
19579
|
-
ref:
|
|
19590
|
+
ref: handleRef,
|
|
19580
19591
|
src: url,
|
|
19581
19592
|
alt: alt,
|
|
19582
19593
|
width: size,
|
|
@@ -19585,13 +19596,13 @@
|
|
|
19585
19596
|
setImageLoaded(true);
|
|
19586
19597
|
},
|
|
19587
19598
|
role: "img",
|
|
19588
|
-
className: imgClassName
|
|
19589
|
-
style: {
|
|
19590
|
-
display: imageLoaded ? "block" : "none"
|
|
19591
|
-
}
|
|
19599
|
+
className: imgClassName
|
|
19592
19600
|
}, rest)), !imageLoaded && /*#__PURE__*/React__default["default"].createElement(SkeletonLoader, {
|
|
19593
19601
|
"data-testid": "loader",
|
|
19594
19602
|
style: {
|
|
19603
|
+
position: "absolute",
|
|
19604
|
+
top: 0,
|
|
19605
|
+
left: 0,
|
|
19595
19606
|
width: size,
|
|
19596
19607
|
height: size,
|
|
19597
19608
|
borderRadius: "100%"
|