@chayns-components/core 5.0.2 → 5.0.3
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/lib/cjs/components/multi-action-button/action-button/ActionButton.js +1 -4
- package/lib/cjs/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/cjs/components/verification-badge/VerificationBadge.js +2 -2
- package/lib/cjs/components/verification-badge/VerificationBadge.js.map +1 -1
- package/lib/cjs/components/verification-badge/VerificationBadge.styles.js +37 -1
- package/lib/cjs/components/verification-badge/VerificationBadge.styles.js.map +1 -1
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js +1 -4
- package/lib/esm/components/multi-action-button/action-button/ActionButton.js.map +1 -1
- package/lib/esm/components/verification-badge/VerificationBadge.js +2 -2
- package/lib/esm/components/verification-badge/VerificationBadge.js.map +1 -1
- package/lib/esm/components/verification-badge/VerificationBadge.styles.js +37 -1
- package/lib/esm/components/verification-badge/VerificationBadge.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -38,7 +38,6 @@ const ActionButton = ({
|
|
|
38
38
|
const isPrimary = actionType === 'primary';
|
|
39
39
|
const isSecondary = actionType === 'secondary';
|
|
40
40
|
const actionColor = action.color ?? '#FFFFFF';
|
|
41
|
-
const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
|
|
42
41
|
return /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledActionButton, {
|
|
43
42
|
disabled: isDisabled || action.isDisabled,
|
|
44
43
|
$backgroundColor: backgroundColor,
|
|
@@ -64,10 +63,8 @@ const ActionButton = ({
|
|
|
64
63
|
color: actionColor,
|
|
65
64
|
size: height - 24
|
|
66
65
|
}) : action.icon), /*#__PURE__*/_react2.default.createElement(_react.AnimatePresence, {
|
|
67
|
-
initial: false
|
|
68
|
-
mode: "wait"
|
|
66
|
+
initial: false
|
|
69
67
|
}, showLabel && /*#__PURE__*/_react2.default.createElement(_ActionButton.StyledLabelWrapper, {
|
|
70
|
-
key: labelKey,
|
|
71
68
|
animate: {
|
|
72
69
|
opacity: 1,
|
|
73
70
|
width: 'auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","
|
|
1
|
+
{"version":3,"file":"ActionButton.js","names":["_react","require","_react2","_interopRequireDefault","_Icon","_ActionButton","e","__esModule","default","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","_action$status","_action$status2","isPrimary","isSecondary","actionColor","color","createElement","StyledActionButton","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","StyledActionContent","StyledIconSlot","icon","icons","size","AnimatePresence","initial","StyledLabelWrapper","animate","opacity","width","marginLeft","exit","transition","StyledSecondaryLabel","style","label","displayName","_default","exports"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -8,8 +8,8 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _VerificationBadge = require("./VerificationBadge.styles");
|
|
9
9
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
10
|
const VerificationBadge = () => /*#__PURE__*/_react.default.createElement(_VerificationBadge.StyledVerificationBadge, {
|
|
11
|
-
className: "
|
|
12
|
-
}, /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null), /*#__PURE__*/_react.default.createElement("span", null));
|
|
11
|
+
className: "beta-chayns-verification-badge"
|
|
12
|
+
}, /*#__PURE__*/_react.default.createElement("span", null, '\ue903'), /*#__PURE__*/_react.default.createElement("span", null, '\ue904'), /*#__PURE__*/_react.default.createElement("span", null, '\ue905'));
|
|
13
13
|
VerificationBadge.displayName = 'VerificationBadge';
|
|
14
14
|
var _default = exports.default = VerificationBadge;
|
|
15
15
|
//# sourceMappingURL=VerificationBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerificationBadge.js","names":["_react","_interopRequireDefault","require","_VerificationBadge","e","__esModule","default","VerificationBadge","createElement","StyledVerificationBadge","className","displayName","_default","exports"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n <StyledVerificationBadge className=\"
|
|
1
|
+
{"version":3,"file":"VerificationBadge.js","names":["_react","_interopRequireDefault","require","_VerificationBadge","e","__esModule","default","VerificationBadge","createElement","StyledVerificationBadge","className","displayName","_default","exports"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n <StyledVerificationBadge className=\"beta-chayns-verification-badge\">\n <span>{'\\ue903'}</span>\n <span>{'\\ue904'}</span>\n <span>{'\\ue905'}</span>\n </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,kBAAA,GAAAD,OAAA;AAAqE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAErE,MAAMG,iBAAiB,GAAGA,CAAA,kBACtBP,MAAA,CAAAM,OAAA,CAAAE,aAAA,CAACL,kBAAA,CAAAM,uBAAuB;EAACC,SAAS,EAAC;AAAgC,gBAC/DV,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CAAC,eACvBR,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CAAC,eACvBR,MAAA,CAAAM,OAAA,CAAAE,aAAA,eAAO,QAAe,CACD,CAC5B;AAEDD,iBAAiB,CAACI,WAAW,GAAG,mBAAmB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAErCC,iBAAiB","ignoreList":[]}
|
|
@@ -6,5 +6,41 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.StyledVerificationBadge = void 0;
|
|
7
7
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
8
8
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
9
|
-
const StyledVerificationBadge = exports.StyledVerificationBadge = _styledComponents.default.span
|
|
9
|
+
const StyledVerificationBadge = exports.StyledVerificationBadge = _styledComponents.default.span`
|
|
10
|
+
@font-face {
|
|
11
|
+
font-family: 'Verified-chaynsID';
|
|
12
|
+
src:
|
|
13
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),
|
|
14
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
|
|
15
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
|
|
16
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),
|
|
17
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');
|
|
18
|
+
font-weight: normal;
|
|
19
|
+
font-style: normal;
|
|
20
|
+
font-display: block;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/*noinspection CssNoGenericFontName*/
|
|
24
|
+
font-family: 'Verified-chaynsID' !important;
|
|
25
|
+
font-style: normal;
|
|
26
|
+
font-weight: normal;
|
|
27
|
+
font-variant: normal;
|
|
28
|
+
text-transform: none;
|
|
29
|
+
line-height: 1;
|
|
30
|
+
font-size: 0.8em;
|
|
31
|
+
-webkit-font-smoothing: antialiased;
|
|
32
|
+
-moz-osx-font-smoothing: grayscale;
|
|
33
|
+
|
|
34
|
+
margin-left: 0.2em;
|
|
35
|
+
|
|
36
|
+
& > :first-child {
|
|
37
|
+
color: #5890ff;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
& > :nth-child(2),
|
|
41
|
+
& > :nth-child(3) {
|
|
42
|
+
margin-left: -1em;
|
|
43
|
+
color: #fff;
|
|
44
|
+
}
|
|
45
|
+
`;
|
|
10
46
|
//# sourceMappingURL=VerificationBadge.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerificationBadge.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledVerificationBadge","exports","styled","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span
|
|
1
|
+
{"version":3,"file":"VerificationBadge.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledVerificationBadge","exports","styled","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span`\n @font-face {\n font-family: 'Verified-chaynsID';\n src:\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');\n font-weight: normal;\n font-style: normal;\n font-display: block;\n }\n\n /*noinspection CssNoGenericFontName*/\n font-family: 'Verified-chaynsID' !important;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n font-size: 0.8em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n margin-left: 0.2em;\n\n & > :first-child {\n color: #5890ff;\n }\n\n & > :nth-child(2),\n & > :nth-child(3) {\n margin-left: -1em;\n color: #fff;\n }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAEhC,MAAMG,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,IAAI;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -30,7 +30,6 @@ const ActionButton = ({
|
|
|
30
30
|
const isPrimary = actionType === 'primary';
|
|
31
31
|
const isSecondary = actionType === 'secondary';
|
|
32
32
|
const actionColor = action.color ?? '#FFFFFF';
|
|
33
|
-
const labelKey = typeof action.label === 'string' || typeof action.label === 'number' ? action.label : actionType;
|
|
34
33
|
return /*#__PURE__*/React.createElement(StyledActionButton, {
|
|
35
34
|
disabled: isDisabled || action.isDisabled,
|
|
36
35
|
$backgroundColor: backgroundColor,
|
|
@@ -56,10 +55,8 @@ const ActionButton = ({
|
|
|
56
55
|
color: actionColor,
|
|
57
56
|
size: height - 24
|
|
58
57
|
}) : action.icon), /*#__PURE__*/React.createElement(AnimatePresence, {
|
|
59
|
-
initial: false
|
|
60
|
-
mode: "wait"
|
|
58
|
+
initial: false
|
|
61
59
|
}, showLabel && /*#__PURE__*/React.createElement(StyledLabelWrapper, {
|
|
62
|
-
key: labelKey,
|
|
63
60
|
animate: {
|
|
64
61
|
opacity: 1,
|
|
65
62
|
width: 'auto',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","
|
|
1
|
+
{"version":3,"file":"ActionButton.js","names":["AnimatePresence","React","Icon","StyledActionButton","StyledActionContent","StyledIconSlot","StyledLabelWrapper","StyledSecondaryLabel","LABEL_GAP","LABEL_TRANSITION","duration","ActionButton","action","actionType","backgroundColor","isCollapsed","isDisabled","isExpanded","isHidden","isShrunk","isSolo","onClick","onMouseEnter","onMouseLeave","showLabel","shouldUseContentWidth","height","isPrimary","isSecondary","actionColor","color","createElement","disabled","$backgroundColor","$isCollapsed","$isExpanded","undefined","$isHidden","$isPrimary","$isSecondary","$isShrunk","$isSolo","$pulseColors","status","pulseColors","$height","$statusType","type","$shouldUseContentWidth","icon","icons","size","initial","animate","opacity","width","marginLeft","exit","transition","style","label","displayName"],"sources":["../../../../../src/components/multi-action-button/action-button/ActionButton.tsx"],"sourcesContent":["import { AnimatePresence } from 'motion/react';\nimport React, { FC, MouseEvent } from 'react';\nimport Icon from '../../icon/Icon';\nimport {\n StyledActionButton,\n StyledActionContent,\n StyledIconSlot,\n StyledLabelWrapper,\n StyledSecondaryLabel,\n} from './ActionButton.styles';\nimport type { MultiActionButtonAction } from '../MultiActionButton.types';\n\nconst LABEL_GAP = 6;\nconst LABEL_TRANSITION = { duration: 0.3 };\n\nexport type ActionButtonProps = {\n action: MultiActionButtonAction;\n actionType: 'primary' | 'secondary';\n backgroundColor?: string;\n isCollapsed: boolean;\n isDisabled: boolean;\n isExpanded?: boolean;\n isHidden?: boolean;\n isShrunk?: boolean;\n isSolo?: boolean;\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n onMouseEnter?: () => void;\n onMouseLeave?: () => void;\n showLabel: boolean;\n shouldUseContentWidth: boolean;\n height: number;\n};\n\n/**\n * Shared action button UI used by both primary and secondary actions.\n * Keeps layout and animations consistent while isolating styling details.\n */\nconst ActionButton: FC<ActionButtonProps> = ({\n action,\n actionType,\n backgroundColor,\n isCollapsed,\n isDisabled,\n isExpanded,\n isHidden,\n isShrunk,\n isSolo,\n onClick,\n onMouseEnter,\n onMouseLeave,\n showLabel,\n shouldUseContentWidth,\n height,\n}) => {\n const isPrimary = actionType === 'primary';\n const isSecondary = actionType === 'secondary';\n const actionColor = action.color ?? '#FFFFFF';\n\n return (\n <StyledActionButton\n disabled={isDisabled || action.isDisabled}\n $backgroundColor={backgroundColor}\n $isCollapsed={isCollapsed}\n $isExpanded={isSecondary ? isExpanded : undefined}\n $isHidden={isSecondary ? isHidden : undefined}\n $isPrimary={isPrimary}\n $isSecondary={isSecondary}\n $isShrunk={isPrimary ? isShrunk : undefined}\n $isSolo={isPrimary ? isSolo : undefined}\n $pulseColors={action.status?.pulseColors}\n $height={height}\n $statusType={action.status?.type}\n $shouldUseContentWidth={shouldUseContentWidth}\n onClick={onClick}\n onMouseEnter={onMouseEnter}\n onMouseLeave={onMouseLeave}\n type=\"button\"\n >\n <StyledActionContent>\n <StyledIconSlot $height={height}>\n {typeof action.icon === 'string' ? (\n <Icon icons={[action.icon]} color={actionColor} size={height - 24} />\n ) : (\n action.icon\n )}\n </StyledIconSlot>\n <AnimatePresence initial={false}>\n {/* Animate width and margin to avoid layout jumps when labels mount/unmount. */}\n {showLabel && (\n <StyledLabelWrapper\n animate={{ opacity: 1, width: 'auto', marginLeft: LABEL_GAP }}\n exit={{ opacity: 0, width: 0, marginLeft: 0 }}\n initial={{ opacity: 0, width: 0, marginLeft: 0 }}\n transition={LABEL_TRANSITION}\n >\n <StyledSecondaryLabel style={{ color: actionColor }}>\n {action.label}\n </StyledSecondaryLabel>\n </StyledLabelWrapper>\n )}\n </AnimatePresence>\n </StyledActionContent>\n </StyledActionButton>\n );\n};\n\nActionButton.displayName = 'ActionButton';\n\nexport default ActionButton;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { StyledVerificationBadge } from './VerificationBadge.styles';
|
|
3
3
|
const VerificationBadge = () => /*#__PURE__*/React.createElement(StyledVerificationBadge, {
|
|
4
|
-
className: "
|
|
5
|
-
}, /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null), /*#__PURE__*/React.createElement("span", null));
|
|
4
|
+
className: "beta-chayns-verification-badge"
|
|
5
|
+
}, /*#__PURE__*/React.createElement("span", null, '\ue903'), /*#__PURE__*/React.createElement("span", null, '\ue904'), /*#__PURE__*/React.createElement("span", null, '\ue905'));
|
|
6
6
|
VerificationBadge.displayName = 'VerificationBadge';
|
|
7
7
|
export default VerificationBadge;
|
|
8
8
|
//# sourceMappingURL=VerificationBadge.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerificationBadge.js","names":["React","StyledVerificationBadge","VerificationBadge","createElement","className","displayName"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n <StyledVerificationBadge className=\"
|
|
1
|
+
{"version":3,"file":"VerificationBadge.js","names":["React","StyledVerificationBadge","VerificationBadge","createElement","className","displayName"],"sources":["../../../../src/components/verification-badge/VerificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { StyledVerificationBadge } from './VerificationBadge.styles';\n\nconst VerificationBadge = () => (\n <StyledVerificationBadge className=\"beta-chayns-verification-badge\">\n <span>{'\\ue903'}</span>\n <span>{'\\ue904'}</span>\n <span>{'\\ue905'}</span>\n </StyledVerificationBadge>\n);\n\nVerificationBadge.displayName = 'VerificationBadge';\n\nexport default VerificationBadge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,iBAAiB,GAAGA,CAAA,kBACtBF,KAAA,CAAAG,aAAA,CAACF,uBAAuB;EAACG,SAAS,EAAC;AAAgC,gBAC/DJ,KAAA,CAAAG,aAAA,eAAO,QAAe,CAAC,eACvBH,KAAA,CAAAG,aAAA,eAAO,QAAe,CAAC,eACvBH,KAAA,CAAAG,aAAA,eAAO,QAAe,CACD,CAC5B;AAEDD,iBAAiB,CAACG,WAAW,GAAG,mBAAmB;AAEnD,eAAeH,iBAAiB","ignoreList":[]}
|
|
@@ -1,3 +1,39 @@
|
|
|
1
1
|
import styled from 'styled-components';
|
|
2
|
-
export const StyledVerificationBadge = styled.span
|
|
2
|
+
export const StyledVerificationBadge = styled.span`
|
|
3
|
+
@font-face {
|
|
4
|
+
font-family: 'Verified-chaynsID';
|
|
5
|
+
src:
|
|
6
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),
|
|
7
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
|
|
8
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),
|
|
9
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),
|
|
10
|
+
url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');
|
|
11
|
+
font-weight: normal;
|
|
12
|
+
font-style: normal;
|
|
13
|
+
font-display: block;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/*noinspection CssNoGenericFontName*/
|
|
17
|
+
font-family: 'Verified-chaynsID' !important;
|
|
18
|
+
font-style: normal;
|
|
19
|
+
font-weight: normal;
|
|
20
|
+
font-variant: normal;
|
|
21
|
+
text-transform: none;
|
|
22
|
+
line-height: 1;
|
|
23
|
+
font-size: 0.8em;
|
|
24
|
+
-webkit-font-smoothing: antialiased;
|
|
25
|
+
-moz-osx-font-smoothing: grayscale;
|
|
26
|
+
|
|
27
|
+
margin-left: 0.2em;
|
|
28
|
+
|
|
29
|
+
& > :first-child {
|
|
30
|
+
color: #5890ff;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
& > :nth-child(2),
|
|
34
|
+
& > :nth-child(3) {
|
|
35
|
+
margin-left: -1em;
|
|
36
|
+
color: #fff;
|
|
37
|
+
}
|
|
38
|
+
`;
|
|
3
39
|
//# sourceMappingURL=VerificationBadge.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerificationBadge.styles.js","names":["styled","StyledVerificationBadge","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span
|
|
1
|
+
{"version":3,"file":"VerificationBadge.styles.js","names":["styled","StyledVerificationBadge","span"],"sources":["../../../../src/components/verification-badge/VerificationBadge.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledVerificationBadge = styled.span`\n @font-face {\n font-family: 'Verified-chaynsID';\n src:\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff2'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.woff2) format('woff'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.ttf) format('truetype'),\n url(https://api.chayns-static.space/font-vcid/Verified-chaynsID.svg) format('svg');\n font-weight: normal;\n font-style: normal;\n font-display: block;\n }\n\n /*noinspection CssNoGenericFontName*/\n font-family: 'Verified-chaynsID' !important;\n font-style: normal;\n font-weight: normal;\n font-variant: normal;\n text-transform: none;\n line-height: 1;\n font-size: 0.8em;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n\n margin-left: 0.2em;\n\n & > :first-child {\n color: #5890ff;\n }\n\n & > :nth-child(2),\n & > :nth-child(3) {\n margin-left: -1em;\n color: #fff;\n }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACE,IAAI;AAClD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.
|
|
3
|
+
"version": "5.0.3",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -86,5 +86,5 @@
|
|
|
86
86
|
"publishConfig": {
|
|
87
87
|
"access": "public"
|
|
88
88
|
},
|
|
89
|
-
"gitHead": "
|
|
89
|
+
"gitHead": "03777734865e45e8beb7452a27a326d2720613ac"
|
|
90
90
|
}
|