@laerdal/life-react-components 1.7.0-dev.14 → 1.7.0-dev.16.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/dist/Button/Iconbutton.cjs +14 -10
  2. package/dist/Button/Iconbutton.cjs.map +1 -1
  3. package/dist/Button/Iconbutton.d.ts +1 -0
  4. package/dist/Button/Iconbutton.js +10 -9
  5. package/dist/Button/Iconbutton.js.map +1 -1
  6. package/dist/Chips/ChipStyles.cjs +2 -2
  7. package/dist/Chips/ChipStyles.cjs.map +1 -1
  8. package/dist/Chips/ChipStyles.js +2 -2
  9. package/dist/Chips/ChipStyles.js.map +1 -1
  10. package/dist/Chips/ChipTypes.d.ts +1 -1
  11. package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs +0 -4
  12. package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map +1 -1
  13. package/dist/GlobalNavigationBar/UserMenu/MenuLink.js +0 -3
  14. package/dist/GlobalNavigationBar/UserMenu/MenuLink.js.map +1 -1
  15. package/dist/Toggles/ToggleButton.cjs +81 -0
  16. package/dist/Toggles/ToggleButton.cjs.map +1 -0
  17. package/dist/Toggles/ToggleButton.d.ts +14 -0
  18. package/dist/Toggles/ToggleButton.js +59 -0
  19. package/dist/Toggles/ToggleButton.js.map +1 -0
  20. package/dist/Toggles/index.cjs +8 -0
  21. package/dist/Toggles/index.cjs.map +1 -1
  22. package/dist/Toggles/index.d.ts +2 -1
  23. package/dist/Toggles/index.js +2 -1
  24. package/dist/Toggles/index.js.map +1 -1
  25. package/package.json +1 -1
package/dist/Button/Iconbutton.cjs CHANGED
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = void 0;
8
+ exports.default = exports.StyledSecondaryIconButton = exports.StyledPrimaryIconButton = exports.IconButtonContent = void 0;
9
9
 
10
10
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
11
11
 
@@ -21,7 +21,7 @@ var _common = require("../common");
21
21
 
22
22
  var _jsxRuntime = require("react/jsx-runtime");
23
23
 
24
- var _templateObject, _templateObject2, _templateObject3;
24
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
25
25
 
26
26
  var getBorderRadius = function getBorderRadius(props) {
27
27
  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
@@ -43,11 +43,15 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
43
43
  }
44
44
  };
45
45
 
46
- var StyledIconButton = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ", ";\n ", " {\n display: block;\n }\n\n border-radius: ", ";\n div {\n height: 36px;\n width: 36px;\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ", ";\n width: ", ";\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ", "\n }\n"])), function (props) {
46
+ var IconButtonContent = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
47
+
48
+ exports.IconButtonContent = IconButtonContent;
49
+
50
+ var StyledIconButton = _styledComponents.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ", ";\n ", " {\n display: block;\n }\n\n border-radius: ", ";\n ", " {\n height: 36px;\n width: 36px;\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ", ";\n width: ", ";\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ", "\n }\n"])), function (props) {
47
51
  return props.hideOnLowWidth ? 'none' : 'block';
48
52
  }, _styles.BREAKPOINTS.MEDIUM, function (props) {
49
53
  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
50
- }, getBorderRadiusStyle, function (props) {
54
+ }, IconButtonContent, getBorderRadiusStyle, function (props) {
51
55
  return props.unsetIconSize ? 'unset' : '24px';
52
56
  }, function (props) {
53
57
  return props.unsetIconSize ? 'unset' : '24px';
@@ -55,21 +59,21 @@ var StyledIconButton = _styledComponents.default.button(_templateObject || (_tem
55
59
  return props.invertFocus ? _styles.invertedFocusStyles : _styles.focusStyles;
56
60
  });
57
61
 
58
- var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n div {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:disabled {\n div {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), function (props) {
62
+ var StyledPrimaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n ", " {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n &:hover:not(:disabled) {\n ", " {\n background-color: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n ", " {\n background: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:disabled {\n ", " {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), IconButtonContent, function (props) {
59
63
  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.primary_500;
60
64
  }, function (props) {
61
65
  return props.iconColor || _styles.COLORS.white;
62
66
  }, function (props) {
63
67
  return props.iconColor || _styles.COLORS.white;
64
- }, _styles.COLORS.primary_700, _styles.COLORS.white, _styles.COLORS.primary_800, _styles.COLORS.white, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
68
+ }, IconButtonContent, _styles.COLORS.primary_700, IconButtonContent, IconButtonContent, _styles.COLORS.white, IconButtonContent, _styles.COLORS.primary_800, IconButtonContent, IconButtonContent, _styles.COLORS.white, IconButtonContent, _styles.COLORS.neutral_200, _styles.COLORS.white, _styles.COLORS.white);
65
69
  exports.StyledPrimaryIconButton = StyledPrimaryIconButton;
66
- var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n div {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n \n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n\n &:disabled {\n div {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), function (props) {
70
+ var StyledSecondaryIconButton = (0, _styledComponents.default)(StyledIconButton)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n ", " {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n \n &:hover:not(:disabled) {\n ", " {\n background-color: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n ", " {\n background: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n\n &:disabled {\n ", " {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), IconButtonContent, function (props) {
67
71
  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
68
72
  }, function (props) {
69
73
  return props.iconColor || _styles.COLORS.neutral_600;
70
74
  }, function (props) {
71
75
  return props.iconColor || _styles.COLORS.neutral_600;
72
- }, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _styles.COLORS.primary_100, _styles.COLORS.primary_800, function (props) {
76
+ }, IconButtonContent, _styles.COLORS.primary_20, IconButtonContent, IconButtonContent, _styles.COLORS.primary_700, IconButtonContent, _styles.COLORS.primary_100, IconButtonContent, IconButtonContent, _styles.COLORS.primary_800, IconButtonContent, function (props) {
73
77
  return props.useTransparentBackground ? 'transparent' : _styles.COLORS.white;
74
78
  }, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
75
79
  exports.StyledSecondaryIconButton = StyledSecondaryIconButton;
@@ -122,7 +126,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
122
126
  style: style,
123
127
  invertFocus: invertFocus,
124
128
  focusBackgroundColor: focusBackgroundColor,
125
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
129
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContent, {
126
130
  children: children
127
131
  })
128
132
  });
@@ -153,7 +157,7 @@ var IconButton = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
153
157
  style: style,
154
158
  invertFocus: invertFocus,
155
159
  focusBackgroundColor: focusBackgroundColor,
156
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
160
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButtonContent, {
157
161
  children: children
158
162
  })
159
163
  });
package/dist/Button/Iconbutton.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","styled","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n \n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n`;\n\nexport interface IconButtonProps {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n focusBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n children?: React.ReactNode;\n hidden?: boolean;\n style?: CSSProperties | undefined;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n focusBackgroundColor,\n type,\n hidden,\n style,\n invertFocus\n}: IconButtonProps, ref) => {\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
1
+ {"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","styled","div","StyledIconButton","button","hideOnLowWidth","BREAKPOINTS","MEDIUM","unsetIconSize","invertFocus","invertedFocusStyles","focusStyles","StyledPrimaryIconButton","useTransparentBackground","COLORS","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","React","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation","defaultOnMouseDownHandler"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n \n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n`;\n\nexport interface IconButtonProps {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n focusBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n children?: React.ReactNode;\n hidden?: boolean;\n style?: CSSProperties | undefined;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n focusBackgroundColor,\n type,\n hidden,\n style,\n invertFocus\n}: IconButtonProps, ref) => {\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.cjs"}
package/dist/Button/Iconbutton.d.ts CHANGED
@@ -12,6 +12,7 @@ interface HeaderItemProps {
12
12
  focusBackgroundColor?: string;
13
13
  invertFocus?: boolean;
14
14
  }
15
+ export declare const IconButtonContent: import("styled-components").StyledComponent<"div", any, {}, never>;
15
16
  export declare const StyledPrimaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
16
17
  export declare const StyledSecondaryIconButton: import("styled-components").StyledComponent<"button", any, HeaderItemProps, never>;
17
18
  export interface IconButtonProps {
package/dist/Button/Iconbutton.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
2
2
  import _pt from "prop-types";
3
3
 
4
- var _templateObject, _templateObject2, _templateObject3;
4
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
5
5
 
6
6
  import React from 'react';
7
7
  import styled from 'styled-components';
@@ -29,31 +29,32 @@ var getBorderRadiusStyle = function getBorderRadiusStyle(props) {
29
29
  }
30
30
  };
31
31
 
32
- var StyledIconButton = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ", ";\n ", " {\n display: block;\n }\n\n border-radius: ", ";\n div {\n height: 36px;\n width: 36px;\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ", ";\n width: ", ";\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ", "\n }\n"])), function (props) {
32
+ export var IconButtonContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
33
+ var StyledIconButton = styled.button(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ", ";\n ", " {\n display: block;\n }\n\n border-radius: ", ";\n ", " {\n height: 36px;\n width: 36px;\n border-radius: ", ";\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ", ";\n width: ", ";\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ", "\n }\n"])), function (props) {
33
34
  return props.hideOnLowWidth ? 'none' : 'block';
34
35
  }, BREAKPOINTS.MEDIUM, function (props) {
35
36
  return props.borderRadius ? "".concat(props.borderRadius, "px") : '4px';
36
- }, getBorderRadiusStyle, function (props) {
37
+ }, IconButtonContent, getBorderRadiusStyle, function (props) {
37
38
  return props.unsetIconSize ? 'unset' : '24px';
38
39
  }, function (props) {
39
40
  return props.unsetIconSize ? 'unset' : '24px';
40
41
  }, function (props) {
41
42
  return props.invertFocus ? invertedFocusStyles : focusStyles;
42
43
  });
43
- export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n div {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:disabled {\n div {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), function (props) {
44
+ export var StyledPrimaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n &:hover:not(:disabled) {\n ", " {\n background-color: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n ", " {\n background: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:disabled {\n ", " {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), IconButtonContent, function (props) {
44
45
  return props.useTransparentBackground ? 'transparent' : COLORS.primary_500;
45
46
  }, function (props) {
46
47
  return props.iconColor || COLORS.white;
47
48
  }, function (props) {
48
49
  return props.iconColor || COLORS.white;
49
- }, COLORS.primary_700, COLORS.white, COLORS.primary_800, COLORS.white, COLORS.neutral_200, COLORS.white, COLORS.white);
50
- export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n div {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n \n &:hover:not(:disabled) {\n div {\n background-color: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n div {\n background: ", ";\n }\n div svg path,\n div svg {\n fill: ", ";\n }\n }\n\n &:disabled {\n div {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), function (props) {
50
+ }, IconButtonContent, COLORS.primary_700, IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_800, IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.neutral_200, COLORS.white, COLORS.white);
51
+ export var StyledSecondaryIconButton = styled(StyledIconButton)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n ", " {\n background-color: ", ";\n\n svg {\n fill: ", ";\n path {\n fill: ", ";\n }\n }\n }\n \n &:hover:not(:disabled) {\n ", " {\n background-color: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n &:active:not(:disabled) {\n ", " {\n background: ", ";\n }\n ", " svg path,\n ", " svg {\n fill: ", ";\n }\n }\n\n &:disabled {\n ", " {\n background-color: ", ";\n }\n svg {\n path {\n fill: ", ";\n }\n fill: ", ";\n }\n }\n\n"])), IconButtonContent, function (props) {
51
52
  return props.useTransparentBackground ? 'transparent' : COLORS.white;
52
53
  }, function (props) {
53
54
  return props.iconColor || COLORS.neutral_600;
54
55
  }, function (props) {
55
56
  return props.iconColor || COLORS.neutral_600;
56
- }, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, function (props) {
57
+ }, IconButtonContent, COLORS.primary_20, IconButtonContent, IconButtonContent, COLORS.primary_700, IconButtonContent, COLORS.primary_100, IconButtonContent, IconButtonContent, COLORS.primary_800, IconButtonContent, function (props) {
57
58
  return props.useTransparentBackground ? 'transparent' : COLORS.white;
58
59
  }, COLORS.neutral_300, COLORS.neutral_300);
59
60
  var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
@@ -104,7 +105,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
104
105
  style: style,
105
106
  invertFocus: invertFocus,
106
107
  focusBackgroundColor: focusBackgroundColor,
107
- children: /*#__PURE__*/_jsx("div", {
108
+ children: /*#__PURE__*/_jsx(IconButtonContent, {
108
109
  children: children
109
110
  })
110
111
  });
@@ -135,7 +136,7 @@ var IconButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
135
136
  style: style,
136
137
  invertFocus: invertFocus,
137
138
  focusBackgroundColor: focusBackgroundColor,
138
- children: /*#__PURE__*/_jsx("div", {
139
+ children: /*#__PURE__*/_jsx(IconButtonContent, {
139
140
  children: children
140
141
  })
141
142
  });
package/dist/Button/Iconbutton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n div {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_700};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_800};\n }\n div svg path,\n div svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n div {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n \n &:hover:not(:disabled) {\n div {\n background-color: ${COLORS.primary_20};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n div {\n background: ${COLORS.primary_100};\n }\n div svg path,\n div svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n div {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n`;\n\nexport interface IconButtonProps {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n focusBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n children?: React.ReactNode;\n hidden?: boolean;\n style?: CSSProperties | undefined;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n focusBackgroundColor,\n type,\n hidden,\n style,\n invertFocus\n}: IconButtonProps, ref) => {\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <div>{children}</div>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <div>{children}</div>\n </StyledPrimaryIconButton>\n );\n }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
1
+ {"version":3,"sources":["../../src/Button/Iconbutton.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","focusStyles","invertedFocusStyles","defaultOnMouseDownHandler","getBorderRadius","props","borderRadius","getBorderRadiusStyle","radius","flatEdge","IconButtonContent","div","StyledIconButton","button","hideOnLowWidth","MEDIUM","unsetIconSize","invertFocus","StyledPrimaryIconButton","useTransparentBackground","primary_500","iconColor","white","primary_700","primary_800","neutral_200","StyledSecondaryIconButton","neutral_600","primary_20","primary_100","neutral_300","IconButton","forwardRef","ref","id","variant","shape","action","isInMobileMenu","children","disabled","tabIndex","onKeyPress","focusBackgroundColor","type","hidden","style","event","stopPropagation"],"mappings":"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","sourcesContent":["import React from 'react';\nimport styled, {css, CSSProperties} from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\ninterface HeaderItemProps {\n hideOnLowWidth: boolean;\n inMobileMenu?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n borderRadius?: number;\n shape?: string;\n flatEdge?: string;\n focusBackgroundColor?: string;\n invertFocus?: boolean;\n}\n\nconst getBorderRadius = (props:HeaderItemProps) => (props.borderRadius ? `${props.borderRadius}px` : '4px');\n\nconst getBorderRadiusStyle = (props:HeaderItemProps) => {\n const radius = getBorderRadius(props);\n switch(props.flatEdge)\n {\n case 'left':\n return `0px ${radius} ${radius} 0px`;\n\n case 'right':\n return `${radius} 0px 0px ${radius}`;\n\n case 'none':\n default:\n return `${radius}`;\n }\n};\n\nexport const IconButtonContent = styled.div``;\n\nconst StyledIconButton = styled.button<HeaderItemProps>`\n border-width: 0;\n cursor: pointer;\n height: 48px;\n width: 48px;\n background: transparent;\n position: relative;\n\n display: ${(props) => (props.hideOnLowWidth ? 'none' : 'block')};\n ${BREAKPOINTS.MEDIUM} {\n display: block;\n }\n\n border-radius: ${(props) => (props.borderRadius ? `${props.borderRadius}px` : '4px')};\n ${IconButtonContent} {\n height: 36px;\n width: 36px;\n border-radius: ${getBorderRadiusStyle};\n display: flex;\n justify-content: center;\n align-items: center;\n svg {\n height: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n width: ${(props) => (props.unsetIconSize ? 'unset' : '24px')};\n padding: 0;\n }\n }\n &:only-child {\n margin: 0;\n }\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n ${props => props.invertFocus ? invertedFocusStyles : focusStyles}\n }\n`;\n\nexport const StyledPrimaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.primary_500)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.white};\n path {\n fill: ${(props) => props.iconColor || COLORS.white};\n }\n }\n }\n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_700};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:active:not(:disabled) {\n ${IconButtonContent} {\n background: ${COLORS.primary_800};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.white};\n }\n }\n &:disabled {\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_200};\n }\n svg {\n path {\n fill: ${COLORS.white};\n }\n fill: ${COLORS.white};\n }\n }\n\n`;\n\nexport const StyledSecondaryIconButton = styled(StyledIconButton)`\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n\n svg {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n path {\n fill: ${(props) => props.iconColor || COLORS.neutral_600};\n }\n }\n }\n \n &:hover:not(:disabled) {\n ${IconButtonContent} {\n background-color: ${COLORS.primary_20};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_700};\n }\n }\n &:active:not(:disabled) {\n ${IconButtonContent} {\n background: ${COLORS.primary_100};\n }\n ${IconButtonContent} svg path,\n ${IconButtonContent} svg {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:disabled {\n ${IconButtonContent} {\n background-color: ${(props) => (props.useTransparentBackground ? 'transparent' : COLORS.white)};\n }\n svg {\n path {\n fill: ${COLORS.neutral_300};\n }\n fill: ${COLORS.neutral_300};\n }\n }\n\n`;\n\nexport interface IconButtonProps {\n id?: string;\n variant?: 'primary' | 'secondary';\n shape?: 'square' | 'circular';\n action: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n hideOnLowWidth?: boolean;\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n isInMobileMenu?: boolean;\n disabled?: boolean;\n useTransparentBackground?: boolean;\n iconColor?: string;\n unsetIconSize?: boolean;\n tabIndex?: number;\n borderRadius?: number;\n onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;\n focusBackgroundColor?: string;\n type?: 'submit' | 'reset' | 'button' | undefined;\n children?: React.ReactNode;\n hidden?: boolean;\n style?: CSSProperties | undefined;\n invertFocus?: boolean;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(({\n id,\n variant,\n shape,\n action,\n hideOnLowWidth,\n isInMobileMenu,\n children,\n useTransparentBackground,\n disabled,\n iconColor,\n unsetIconSize,\n tabIndex,\n flatEdge,\n borderRadius,\n onKeyPress,\n focusBackgroundColor,\n type,\n hidden,\n style,\n invertFocus\n}: IconButtonProps, ref) => {\n\n // Let's render button\n switch (variant) {\n case 'secondary':\n return (\n <StyledSecondaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledSecondaryIconButton>\n );\n case 'primary':\n default:\n return (\n <StyledPrimaryIconButton\n id={id}\n type={type ?? 'button'}\n data-testid={id}\n flatEdge={flatEdge}\n ref={ref}\n onClick={(event: React.MouseEvent<HTMLButtonElement>) => {event.stopPropagation(); action(event);}}\n disabled={disabled}\n hideOnLowWidth={hideOnLowWidth || false}\n inMobileMenu={isInMobileMenu}\n useTransparentBackground={useTransparentBackground}\n iconColor={iconColor}\n unsetIconSize={unsetIconSize}\n tabIndex={tabIndex || 0}\n borderRadius={borderRadius || shape === 'circular' ? 18 : 0}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={onKeyPress}\n hidden={hidden}\n style={style}\n invertFocus={invertFocus}\n focusBackgroundColor={focusBackgroundColor}>\n <IconButtonContent>{children}</IconButtonContent>\n </StyledPrimaryIconButton>\n );\n }\n});\n\nexport default IconButton;\n"],"file":"Iconbutton.js"}
package/dist/Chips/ChipStyles.cjs CHANGED
@@ -19,11 +19,11 @@ var ChipContentContainer = _styledComponents.default.div(_templateObject || (_te
19
19
 
20
20
  exports.ChipContentContainer = ChipContentContainer;
21
21
 
22
- var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
22
+ var ChipContent = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n"])), (0, _styles.ComponentXSStyling)(_styles.ComponentTextStyle.Bold, null));
23
23
 
24
24
  exports.ChipContent = ChipContent;
25
25
 
26
- var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.warning_100, _styles.COLORS.warning_600, ChipContent, _styles.COLORS.warning_200, _styles.COLORS.warning_700, ChipContent, _styles.COLORS.warning_300, _styles.COLORS.warning_800, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.warning_200, _styles.COLORS.warning_700, _styles.COLORS.warning_300, _styles.COLORS.warning_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
26
+ var ChipContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Bold, null), ChipContent, (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Bold, null), _styles.focusStyles, _styles.COLORS.white, ChipContent, _styles.COLORS.primary_500, ChipContent, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_800, _styles.COLORS.neutral_600, ChipContent, _styles.COLORS.white, _styles.COLORS.neutral_200, ChipContent, _styles.COLORS.primary_20, _styles.COLORS.primary_200, _styles.COLORS.primary_700, ChipContent, _styles.COLORS.primary_100, _styles.COLORS.primary_300, _styles.COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, _styles.COLORS.critical_100, _styles.COLORS.critical_600, ChipContent, _styles.COLORS.critical_200, _styles.COLORS.critical_700, ChipContent, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_300, _styles.COLORS.critical_200, _styles.COLORS.critical_700, _styles.COLORS.critical_300, _styles.COLORS.critical_800, _styles.COLORS.primary_300, ChipContentContainer, ChipContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
27
27
 
28
28
  exports.ChipContainer = ChipContainer;
29
29
  //# sourceMappingURL=ChipStyles.cjs.map
package/dist/Chips/ChipStyles.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AASO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,2wBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AAgDA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,2wHAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAiCpBF,WAjCoB,EAqClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CArCkB,EA4DpBE,mBA5DoB,EAgEbC,eAAOC,KAhEM,EAkEpBN,WAlEoB,EAmEAK,eAAOE,WAnEP,EAwEpBP,WAxEoB,EAyEAK,eAAOG,WAzEP,EA8EpBR,WA9EoB,EA+EAK,eAAOI,WA/EP,EAqFbJ,eAAOK,WArFM,EAuFpBV,WAvFoB,EAwFAK,eAAOC,KAxFP,EAyFAD,eAAOM,WAzFP,EA8FpBX,WA9FoB,EA+FAK,eAAOO,UA/FP,EAgGAP,eAAOQ,WAhGP,EAiGXR,eAAOG,WAjGI,EAsGpBR,WAtGoB,EAuGAK,eAAOS,WAvGP,EAwGAT,eAAOU,WAxGP,EAyGXV,eAAOI,WAzGI,EAgHpBT,WAhHoB,EAsHpBA,WAtHoB,EA4HpBA,WA5HoB,EAkIpBA,WAlIoB,EAmIAK,eAAOW,WAnIP,EAoIXX,eAAOY,WApII,EAyIpBjB,WAzIoB,EA0INK,eAAOa,WA1ID,EA2IXb,eAAOc,WA3II,EAgJpBnB,WAhJoB,EAiJNK,eAAOe,WAjJD,EAkJXf,eAAOgB,WAlJI,EAuJpBrB,WAvJoB,EAwJAK,eAAOiB,YAxJP,EAyJXjB,eAAOkB,YAzJI,EA8JpBvB,WA9JoB,EA+JNK,eAAOmB,YA/JD,EAgKXnB,eAAOoB,YAhKI,EAqKpBzB,WArKoB,EAsKNK,eAAOqB,YAtKD,EAuKXrB,eAAOsB,YAvKI,EA6KpBvB,mBA7KoB,EAiLFC,eAAOG,WAjLL,EAqLFH,eAAOI,WArLL,EA0LbJ,eAAOU,WA1LM,EAgMAV,eAAOa,WAhMP,EAiMXb,eAAOc,WAjMI,EAqMAd,eAAOe,WArMP,EAsMXf,eAAOgB,WAtMI,EA2MXhB,eAAOU,WA3MI,EAiNAV,eAAOmB,YAjNP,EAkNXnB,eAAOoB,YAlNI,EAsNApB,eAAOqB,YAtNP,EAuNXrB,eAAOsB,YAvNI,EA4NXtB,eAAOU,WA5NI,EAmOpBlB,oBAnOoB,EAuOpBG,WAvOoB,EAyOAK,eAAOuB,WAzOP,EA0OXvB,eAAOwB,WA1OI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n focusStyles\n} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ${ChipContent} {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.cjs"}
1
+ {"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["ChipContentContainer","styled","div","ChipContent","ComponentTextStyle","Bold","ChipContainer","focusStyles","COLORS","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;;;;;;;;AAGA;;AAKA;;;;AAEO,IAAMA,oBAAoB,GAAGC,0BAAOC,GAAV,2KAA1B;;;;AAOA,IAAMC,WAAW,GAAGF,0BAAOC,GAAV,ywBACpB,gCAAmBE,2BAAmBC,IAAtC,EAA4C,IAA5C,CADoB,CAAjB;;;;AA+CA,IAAMC,aAAa,GAAGL,0BAAOC,GAAV,smGAMpBC,WANoB,EAUlB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CAVkB,EAgCpBF,WAhCoB,EAoClB,+BAAkBC,2BAAmBC,IAArC,EAA2C,IAA3C,CApCkB,EA0DpBE,mBA1DoB,EA8DbC,eAAOC,KA9DM,EAgEpBN,WAhEoB,EAiEAK,eAAOE,WAjEP,EAsEpBP,WAtEoB,EAuEAK,eAAOG,WAvEP,EA4EpBR,WA5EoB,EA6EAK,eAAOI,WA7EP,EAkFbJ,eAAOK,WAlFM,EAoFpBV,WApFoB,EAqFAK,eAAOC,KArFP,EAsFAD,eAAOM,WAtFP,EA2FpBX,WA3FoB,EA4FAK,eAAOO,UA5FP,EA6FAP,eAAOQ,WA7FP,EA8FXR,eAAOG,WA9FI,EAmGpBR,WAnGoB,EAoGAK,eAAOS,WApGP,EAqGAT,eAAOU,WArGP,EAsGXV,eAAOI,WAtGI,EA6GpBT,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAK,eAAOW,YAhIP,EAiIXX,eAAOY,YAjII,EAsIpBjB,WAtIoB,EAuINK,eAAOa,YAvID,EAwIXb,eAAOc,YAxII,EA6IpBnB,WA7IoB,EA8INK,eAAOe,YA9ID,EA+IXf,eAAOgB,YA/II,EAoJpBjB,mBApJoB,EAwJFC,eAAOG,WAxJL,EA4JFH,eAAOI,WA5JL,EAiKbJ,eAAOU,WAjKM,EAsKAV,eAAOa,YAtKP,EAuKXb,eAAOc,YAvKI,EA2KAd,eAAOe,YA3KP,EA4KXf,eAAOgB,YA5KI,EAiLXhB,eAAOU,WAjLI,EAwLpBlB,oBAxLoB,EA4LpBG,WA5LoB,EA8LAK,eAAOiB,WA9LP,EA+LXjB,eAAOkB,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.cjs"}
package/dist/Chips/ChipStyles.js CHANGED
@@ -12,6 +12,6 @@ import styled from 'styled-components';
12
12
 
13
13
  import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';
14
14
  export var ChipContentContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n"])));
15
- export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
16
- export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.warning_100, COLORS.warning_600, ChipContent, COLORS.warning_200, COLORS.warning_700, ChipContent, COLORS.warning_300, COLORS.warning_800, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.warning_200, COLORS.warning_700, COLORS.warning_300, COLORS.warning_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
15
+ export var ChipContent = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n ", "\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n"])), ComponentXSStyling(ComponentTextStyle.Bold, null));
16
+ export var ChipContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ", " {\n gap: 6px;\n padding: 10px 16px;\n\n ", "\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ", " {\n gap: 8px;\n padding: 12px 20px;\n\n ", "\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ", "\n }\n\n &.normal {\n color: ", ";\n\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ", " {\n background-color: ", ";\n }\n }\n\n &.outline {\n color: ", ";\n\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ", " {\n background-color: ", ";\n border: 2px solid ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ", " {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ", " {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ", " {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ", " {\n background: ", ";\n color: ", ";\n }\n }\n\n .action-right:focus {\n ", "\n }\n\n .action-right:hover .chip-icon {\n background-color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right:active .chip-icon {\n background-color: ", ";\n color: ", ";\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n pointer-events: none;\n }\n\n ", " {\n border: none !important;\n background-color: ", " !important;\n color: ", " !important;\n }\n }\n"])), ChipContent, ComponentSStyling(ComponentTextStyle.Bold, null), ChipContent, ComponentMStyling(ComponentTextStyle.Bold, null), focusStyles, COLORS.white, ChipContent, COLORS.primary_500, ChipContent, COLORS.primary_700, ChipContent, COLORS.primary_800, COLORS.neutral_600, ChipContent, COLORS.white, COLORS.neutral_200, ChipContent, COLORS.primary_20, COLORS.primary_200, COLORS.primary_700, ChipContent, COLORS.primary_100, COLORS.primary_300, COLORS.primary_800, ChipContent, ChipContent, ChipContent, ChipContent, COLORS.critical_100, COLORS.critical_600, ChipContent, COLORS.critical_200, COLORS.critical_700, ChipContent, COLORS.critical_300, COLORS.critical_800, focusStyles, COLORS.primary_700, COLORS.primary_800, COLORS.primary_300, COLORS.critical_200, COLORS.critical_700, COLORS.critical_300, COLORS.critical_800, COLORS.primary_300, ChipContentContainer, ChipContent, COLORS.neutral_100, COLORS.neutral_300);
17
17
  //# sourceMappingURL=ChipStyles.js.map
package/dist/Chips/ChipStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","warning_100","warning_600","warning_200","warning_700","warning_300","warning_800","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SACEC,MADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,kBALF,EAMEC,WANF,QAOO,WAPP;AASA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,6vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AAgDP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,6vHAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAiCpBD,WAjCoB,EAqClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CArCC,EA4DpBJ,WA5DoB,EAgEbL,MAAM,CAACW,KAhEM,EAkEpBH,WAlEoB,EAmEAR,MAAM,CAACY,WAnEP,EAwEpBJ,WAxEoB,EAyEAR,MAAM,CAACa,WAzEP,EA8EpBL,WA9EoB,EA+EAR,MAAM,CAACc,WA/EP,EAqFbd,MAAM,CAACe,WArFM,EAuFpBP,WAvFoB,EAwFAR,MAAM,CAACW,KAxFP,EAyFAX,MAAM,CAACgB,WAzFP,EA8FpBR,WA9FoB,EA+FAR,MAAM,CAACiB,UA/FP,EAgGAjB,MAAM,CAACkB,WAhGP,EAiGXlB,MAAM,CAACa,WAjGI,EAsGpBL,WAtGoB,EAuGAR,MAAM,CAACmB,WAvGP,EAwGAnB,MAAM,CAACoB,WAxGP,EAyGXpB,MAAM,CAACc,WAzGI,EAgHpBN,WAhHoB,EAsHpBA,WAtHoB,EA4HpBA,WA5HoB,EAkIpBA,WAlIoB,EAmIAR,MAAM,CAACqB,WAnIP,EAoIXrB,MAAM,CAACsB,WApII,EAyIpBd,WAzIoB,EA0INR,MAAM,CAACuB,WA1ID,EA2IXvB,MAAM,CAACwB,WA3II,EAgJpBhB,WAhJoB,EAiJNR,MAAM,CAACyB,WAjJD,EAkJXzB,MAAM,CAAC0B,WAlJI,EAuJpBlB,WAvJoB,EAwJAR,MAAM,CAAC2B,YAxJP,EAyJX3B,MAAM,CAAC4B,YAzJI,EA8JpBpB,WA9JoB,EA+JNR,MAAM,CAAC6B,YA/JD,EAgKX7B,MAAM,CAAC8B,YAhKI,EAqKpBtB,WArKoB,EAsKNR,MAAM,CAAC+B,YAtKD,EAuKX/B,MAAM,CAACgC,YAvKI,EA6KpB3B,WA7KoB,EAiLFL,MAAM,CAACa,WAjLL,EAqLFb,MAAM,CAACc,WArLL,EA0Lbd,MAAM,CAACoB,WA1LM,EAgMApB,MAAM,CAACuB,WAhMP,EAiMXvB,MAAM,CAACwB,WAjMI,EAqMAxB,MAAM,CAACyB,WArMP,EAsMXzB,MAAM,CAAC0B,WAtMI,EA2MX1B,MAAM,CAACoB,WA3MI,EAiNApB,MAAM,CAAC6B,YAjNP,EAkNX7B,MAAM,CAAC8B,YAlNI,EAsNA9B,MAAM,CAAC+B,YAtNP,EAuNX/B,MAAM,CAACgC,YAvNI,EA4NXhC,MAAM,CAACoB,WA5NI,EAmOpBd,oBAnOoB,EAuOpBE,WAvOoB,EAyOAR,MAAM,CAACiC,WAzOP,EA0OXjC,MAAM,CAACkC,WA1OI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {\n COLORS,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling,\n focusStyles\n} from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border \n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.warning {\n ${ChipContent} {\n background-color: ${COLORS.warning_100};\n color: ${COLORS.warning_600};\n }\n }\n\n &.interactive.warning:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n }\n\n &.interactive.warning:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.warning {\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.warning_200};\n color: ${COLORS.warning_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.warning_300};\n color: ${COLORS.warning_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.js"}
1
+ {"version":3,"sources":["../../src/Chips/ChipStyles.ts"],"names":["styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","focusStyles","ChipContentContainer","div","ChipContent","Bold","ChipContainer","white","primary_500","primary_700","primary_800","neutral_600","neutral_200","primary_20","primary_200","primary_100","primary_300","critical_100","critical_600","critical_200","critical_700","critical_300","critical_800","neutral_100","neutral_300"],"mappings":";;;;AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAASC,MAAT,EAAiBC,iBAAjB,EAAoCC,iBAApC,EAAuDC,kBAAvD,EAA2EC,kBAA3E,EAA+FC,WAA/F,QAAkH,WAAlH;AAEA,OAAO,IAAMC,oBAAoB,GAAGP,MAAM,CAACQ,GAAV,6JAA1B;AAOP,OAAO,IAAMC,WAAW,GAAGT,MAAM,CAACQ,GAAV,2vBACpBH,kBAAkB,CAACD,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CADE,CAAjB;AA+CP,OAAO,IAAMC,aAAa,GAAGX,MAAM,CAACQ,GAAV,wlGAMpBC,WANoB,EAUlBN,iBAAiB,CAACC,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CAVC,EAgCpBD,WAhCoB,EAoClBP,iBAAiB,CAACE,kBAAkB,CAACM,IAApB,EAA0B,IAA1B,CApCC,EA0DpBJ,WA1DoB,EA8DbL,MAAM,CAACW,KA9DM,EAgEpBH,WAhEoB,EAiEAR,MAAM,CAACY,WAjEP,EAsEpBJ,WAtEoB,EAuEAR,MAAM,CAACa,WAvEP,EA4EpBL,WA5EoB,EA6EAR,MAAM,CAACc,WA7EP,EAkFbd,MAAM,CAACe,WAlFM,EAoFpBP,WApFoB,EAqFAR,MAAM,CAACW,KArFP,EAsFAX,MAAM,CAACgB,WAtFP,EA2FpBR,WA3FoB,EA4FAR,MAAM,CAACiB,UA5FP,EA6FAjB,MAAM,CAACkB,WA7FP,EA8FXlB,MAAM,CAACa,WA9FI,EAmGpBL,WAnGoB,EAoGAR,MAAM,CAACmB,WApGP,EAqGAnB,MAAM,CAACoB,WArGP,EAsGXpB,MAAM,CAACc,WAtGI,EA6GpBN,WA7GoB,EAmHpBA,WAnHoB,EAyHpBA,WAzHoB,EA+HpBA,WA/HoB,EAgIAR,MAAM,CAACqB,YAhIP,EAiIXrB,MAAM,CAACsB,YAjII,EAsIpBd,WAtIoB,EAuINR,MAAM,CAACuB,YAvID,EAwIXvB,MAAM,CAACwB,YAxII,EA6IpBhB,WA7IoB,EA8INR,MAAM,CAACyB,YA9ID,EA+IXzB,MAAM,CAAC0B,YA/II,EAoJpBrB,WApJoB,EAwJFL,MAAM,CAACa,WAxJL,EA4JFb,MAAM,CAACc,WA5JL,EAiKbd,MAAM,CAACoB,WAjKM,EAsKApB,MAAM,CAACuB,YAtKP,EAuKXvB,MAAM,CAACwB,YAvKI,EA2KAxB,MAAM,CAACyB,YA3KP,EA4KXzB,MAAM,CAAC0B,YA5KI,EAiLX1B,MAAM,CAACoB,WAjLI,EAwLpBd,oBAxLoB,EA4LpBE,WA5LoB,EA8LAR,MAAM,CAAC2B,WA9LP,EA+LX3B,MAAM,CAAC4B,WA/LI,CAAnB","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, focusStyles } from '../styles';\n\nexport const ChipContentContainer = styled.div`\n display: flex;\n align-items: center;\n min-height: 48px;\n width: max-content;\n`;\n\nexport const ChipContent = styled.div`\n ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n\n position: relative;\n display: flex;\n gap: 4px;\n align-items: center;\n min-height: 24px;\n box-sizing: border-box;\n border-radius: 24px;\n padding: 4px 12px;\n\n .chip-icon {\n height: 16px;\n width: 16px;\n border-radius: 50%;\n\n svg {\n height: 16px;\n width: 16px;\n }\n }\n\n .icon-left {\n margin-left: -4px;\n }\n\n .icon-right {\n margin-right: -4px;\n }\n\n .action-right {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n height: 48px;\n width: 48px;\n right: -8px;\n }\n\n &.with-action-right {\n position: relative;\n padding-right: 28px;\n }\n`;\n\nexport const ChipContainer = styled.div`\n display: inline-block;\n cursor: pointer;\n position: relative;\n\n &.medium {\n ${ChipContent} {\n gap: 6px;\n padding: 10px 16px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 20px;\n width: 20px;\n\n svg {\n height: 20px;\n width: 20px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 38px;\n\n .action-right {\n right: -2px;\n }\n }\n }\n\n &.large {\n ${ChipContent} {\n gap: 8px;\n padding: 12px 20px;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n .chip-icon {\n height: 24px;\n width: 24px;\n\n svg {\n height: 24px;\n width: 24px;\n }\n }\n }\n\n .with-action-right {\n padding-right: 48px;\n\n .action-right {\n right: 4px;\n }\n }\n }\n\n &.interactive:focus {\n ${focusStyles}\n }\n\n &.normal {\n color: ${COLORS.white};\n\n ${ChipContent} {\n background-color: ${COLORS.primary_500};\n }\n }\n\n &.interactive.normal:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.normal:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_800};\n }\n }\n\n &.outline {\n color: ${COLORS.neutral_600};\n\n ${ChipContent} {\n background-color: ${COLORS.white};\n border: 2px solid ${COLORS.neutral_200};\n }\n }\n\n &.interactive.outline:hover:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_20};\n border: 2px solid ${COLORS.primary_200};\n color: ${COLORS.primary_700};\n }\n }\n\n &.interactive.outline:active:not(.action-within) {\n ${ChipContent} {\n background-color: ${COLORS.primary_100};\n border: 2px solid ${COLORS.primary_300};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n //account for border\n &.small.outline:not(.disabled) {\n ${ChipContent} {\n padding: 2px 10px;\n }\n }\n\n &.medium.outline:not(.disabled) {\n ${ChipContent} {\n padding: 8px 14px;\n }\n }\n\n &.large.outline:not(.disabled) {\n ${ChipContent} {\n padding: 10px 18px;\n }\n }\n\n &.error {\n ${ChipContent} {\n background-color: ${COLORS.critical_100};\n color: ${COLORS.critical_600};\n }\n }\n\n &.interactive.error:hover:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n }\n\n &.interactive.error:active:not(.action-within) {\n ${ChipContent} {\n background: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n }\n\n .action-right:focus {\n ${focusStyles}\n }\n\n .action-right:hover .chip-icon {\n background-color: ${COLORS.primary_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.primary_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n\n &.error {\n .action-right:hover .chip-icon {\n background-color: ${COLORS.critical_200};\n color: ${COLORS.critical_700};\n }\n\n .action-right:active .chip-icon {\n background-color: ${COLORS.critical_300};\n color: ${COLORS.critical_800};\n }\n\n .action-right.disabled .chip-icon {\n background-color: transparent;\n color: ${COLORS.primary_300};\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${ChipContentContainer} {\n pointer-events: none;\n }\n\n ${ChipContent} {\n border: none !important;\n background-color: ${COLORS.neutral_100} !important;\n color: ${COLORS.neutral_300} !important;\n }\n }\n`;\n"],"file":"ChipStyles.js"}
package/dist/Chips/ChipTypes.d.ts CHANGED
@@ -35,4 +35,4 @@ export interface ChipValue {
35
35
  size: Size;
36
36
  }
37
37
  export declare type ChipIcons = 'Add' | 'ArrowDropDown' | 'ArrowDropUp' | 'ArrowLineDown' | 'ArrowLineLeft' | 'ArrowLineRight' | 'ArrowLineUp' | 'ArrowStopLeft' | 'ArrowStopRight' | 'Attachment' | 'Attention' | 'BackwardsFiveSec' | 'Book' | 'BookmarkOff' | 'BookmarkOn' | 'Bullet' | 'Calendar' | 'CheckboxOff' | 'CheckboxOn' | 'CheckboxSemi' | 'CheckComplete' | 'ChevronDown' | 'ChevronLeft' | 'ChevronRight' | 'ChevronUp' | 'Clear' | 'Close' | 'ClosedCaptionOff' | 'ClosedCaptionOn' | 'CloudAttention' | 'CloudCheck' | 'CloudDownload' | 'CloudLocked' | 'CloudNoConnection' | 'CloudSyncing' | 'CloudUpload' | 'Cloud' | 'Dashboard' | 'Delete' | 'Download' | 'DragHandle' | 'DragIndicator' | 'Edit' | 'Educator' | 'Equals' | 'EventLog' | 'ExtendTextArea' | 'Filter' | 'Forward' | 'ForwardSlash' | 'ForwardFiveSec' | 'FullscreenExit' | 'Fullscreen' | 'GearSettings' | 'GridView' | 'Group' | 'GuidedTour' | 'Help' | 'Hierarchy' | 'History' | 'Home' | 'Information' | 'Institute' | 'Language' | 'ListView' | 'LoadingMedium' | 'LoadingSmall' | 'LockedOff' | 'LockedOn' | 'Login' | 'Logout' | 'Loop' | 'Mail' | 'Manikin' | 'MapPoint' | 'Menu' | 'Minus' | 'MoreHorizontal' | 'MoreVertical' | 'NotificationNew' | 'Notification' | 'OpenFolder' | 'OpenNewWindow' | 'Pause' | 'PlayOutline' | 'Play' | 'Plus' | 'PointDown' | 'PointLeft' | 'PointRight' | 'PointUp' | 'RadioButtonOff' | 'RadioButtonOn' | 'Record' | 'Refresh' | 'Replay' | 'Rewind' | 'Save' | 'Search' | 'Share' | 'ShoppingCart' | 'StarFilled' | 'StarOutlined' | 'Stop' | 'Support' | 'Team' | 'ThumbsDown' | 'ThumbsUp' | 'TimeLimited' | 'Time' | 'Tip' | 'Upload' | 'Usb' | 'User' | 'Video' | 'VisibleOff' | 'VisibleOn' | 'VolumeDown' | 'VolumeOff' | 'VolumeUp';
38
- export declare type ChipVariant = 'normal' | 'warning' | 'error';
38
+ export declare type ChipVariant = 'normal' | 'error';
package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs CHANGED
@@ -25,8 +25,6 @@ var _SystemIcons = require("../../icons/systemicons/SystemIcons");
25
25
 
26
26
  var _typography = require("../../styles/typography");
27
27
 
28
- var _common = require("../../common");
29
-
30
28
  var _jsxRuntime = require("react/jsx-runtime");
31
29
 
32
30
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
@@ -68,7 +66,6 @@ var MenuLink = function MenuLink(_ref) {
68
66
  href: to,
69
67
  role: "menuitem",
70
68
  className: "UserMenuLink",
71
- onMouseDown: _common.defaultOnMouseDownHandler,
72
69
  onClick: function onClick() {
73
70
  if (_onClick) {
74
71
  _onClick();
@@ -83,7 +80,6 @@ var MenuLink = function MenuLink(_ref) {
83
80
  to: to,
84
81
  role: "menuitem",
85
82
  className: "UserMenuLink",
86
- onMouseDown: _common.defaultOnMouseDownHandler,
87
83
  onClick: function onClick() {
88
84
  if (_onClick) {
89
85
  _onClick();
package/dist/GlobalNavigationBar/UserMenu/MenuLink.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500","defaultOnMouseDownHandler"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB,EADS,gBAiBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAES,iCALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIH,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB;AAlBJ,IADF;AAqCD,CA5CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eAiDaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.cjs"}
1
+ {"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentTextStyle","Regular","COLORS","neutral_600","InternalLink","NavLink","ExternalLink","styled","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAEA,IAAMA,UAAU,OAAGC,qBAAH,yTAUZ,mCAAkBC,2BAAmBC,OAArC,EAA8CC,eAAOC,WAArD,CAVY,EAaHD,eAAOC,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAG,+BAAOC,uBAAP,CAAH,iGACdP,UADc,CAAlB;;AAIA,IAAMQ,YAAY,GAAGC,0BAAOC,CAAV,iGACdV,UADc,CAAlB;;AAIA,IAAMW,cAAc,GAAGF,0BAAOG,GAAV,0KAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,sBAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,qBAAC,mBAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEd,eAAOkB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,qBAAC,yBAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEf,eAAOC;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGU,UAAU,gBACT,sBAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB,EADS,gBAgBT,sBAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,qBAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB;AAjBJ,IADF;AAmCD,CA1CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;eA+CaP,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.cjs"}
package/dist/GlobalNavigationBar/UserMenu/MenuLink.js CHANGED
@@ -9,7 +9,6 @@ import { NavLink } from 'react-router-dom';
9
9
  import { COLORS, ComponentTextStyle } from '../../styles';
10
10
  import { Bullet, ChevronRight } from '../../icons/systemicons/SystemIcons';
11
11
  import { ComponentMStyling } from '../../styles/typography';
12
- import { defaultOnMouseDownHandler } from '../../common';
13
12
  import { jsx as _jsx } from "react/jsx-runtime";
14
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
15
14
  var LinkStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ", "\n svg {\n margin-right: 15px;\n color: ", ";\n }\n"])), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600);
@@ -43,7 +42,6 @@ var MenuLink = function MenuLink(_ref) {
43
42
  href: to,
44
43
  role: "menuitem",
45
44
  className: "UserMenuLink",
46
- onMouseDown: defaultOnMouseDownHandler,
47
45
  onClick: function onClick() {
48
46
  if (_onClick) {
49
47
  _onClick();
@@ -58,7 +56,6 @@ var MenuLink = function MenuLink(_ref) {
58
56
  to: to,
59
57
  role: "menuitem",
60
58
  className: "UserMenuLink",
61
- onMouseDown: defaultOnMouseDownHandler,
62
59
  onClick: function onClick() {
63
60
  if (_onClick) {
64
61
  _onClick();
package/dist/GlobalNavigationBar/UserMenu/MenuLink.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","defaultOnMouseDownHandler","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;AACA,SAAQC,yBAAR,QAAwC,cAAxC;;;AAEA,IAAMC,UAAU,GAAGR,GAAH,0SAUZM,iBAAiB,CAACH,kBAAkB,CAACM,OAApB,EAA6BP,MAAM,CAACQ,WAApC,CAVL,EAaHR,MAAM,CAACQ,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAGZ,MAAM,CAACE,OAAD,CAAT,mFACdO,UADc,CAAlB;AAIA,IAAMI,YAAY,GAAGb,MAAM,CAACc,CAAV,mFACdL,UADc,CAAlB;AAIA,IAAMM,cAAc,GAAGf,MAAM,CAACgB,GAAV,4JAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,MAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,KAAC,MAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAEnB,MAAM,CAACuB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,KAAC,YAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEpB,MAAM,CAACQ;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGQ,UAAU,gBACT,MAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAEV,yBALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIgB,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB,EADS,gBAiBT,MAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,WAAW,EAAEV,yBALf;AAME,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIgB,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OAVH;AAAA,iBAWGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAXX,eAYE;AAAA,kBAAOD;AAAP,QAZF,EAaGK,YAAY,EAbf;AAAA,8BACuBP,EADvB;AAlBJ,IADF;AAqCD,CA5CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AAiDF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\nimport {defaultOnMouseDownHandler} from '../../common';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onMouseDown={defaultOnMouseDownHandler}\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
1
+ {"version":3,"sources":["../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["React","styled","css","NavLink","COLORS","ComponentTextStyle","Bullet","ChevronRight","ComponentMStyling","LinkStyles","Regular","neutral_600","InternalLink","ExternalLink","a","IconsRightSide","div","MenuLink","to","isExternal","menuText","Icon","notification","extendedMenu","onClick","getRightSide","critical_500"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,SAAQC,OAAR,QAAsB,kBAAtB;AACA,SAAQC,MAAR,EAAgBC,kBAAhB,QAAyC,cAAzC;AACA,SAAQC,MAAR,EAAgBC,YAAhB,QAAmC,qCAAnC;AACA,SAAQC,iBAAR,QAAgC,yBAAhC;;;AAEA,IAAMC,UAAU,GAAGP,GAAH,0SAUZM,iBAAiB,CAACH,kBAAkB,CAACK,OAApB,EAA6BN,MAAM,CAACO,WAApC,CAVL,EAaHP,MAAM,CAACO,WAbJ,CAAhB;AAiBA,IAAMC,YAAY,GAAGX,MAAM,CAACE,OAAD,CAAT,mFACdM,UADc,CAAlB;AAIA,IAAMI,YAAY,GAAGZ,MAAM,CAACa,CAAV,mFACdL,UADc,CAAlB;AAIA,IAAMM,cAAc,GAAGd,MAAM,CAACe,GAAV,4JAApB;;AAkBA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA4F;AAAA,MAAzFC,EAAyF,QAAzFA,EAAyF;AAAA,MAArFC,UAAqF,QAArFA,UAAqF;AAAA,MAAzEC,QAAyE,QAAzEA,QAAyE;AAAA,MAA/DC,IAA+D,QAA/DA,IAA+D;AAAA,MAAzDC,YAAyD,QAAzDA,YAAyD;AAAA,MAA3CC,YAA2C,QAA3CA,YAA2C;AAAA,MAA7BC,QAA6B,QAA7BA,OAA6B;;AAC3G,MAAMC,YAAY,GAAG,SAAfA,YAAe;AAAA,wBACnB,MAAC,cAAD;AAAA,iBACGH,YAAY,gBAAG,KAAC,MAAD;AAAQ,QAAA,IAAI,EAAC,MAAb;AAAoB,QAAA,KAAK,EAAElB,MAAM,CAACsB;AAAlC,QAAH,GAAwD,IADvE,EAEGH,YAAY,gBAAG,KAAC,YAAD;AAAc,QAAA,IAAI,EAAC,MAAnB;AAA0B,QAAA,KAAK,EAAEnB,MAAM,CAACO;AAAxC,QAAH,GAA6D,IAF5E;AAAA,MADmB;AAAA,GAArB;;AAMA,sBACE;AAAA,cACGQ,UAAU,gBACT,MAAC,YAAD;AAEE,MAAA,IAAI,EAAED,EAFR;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB,EADS,gBAgBT,MAAC,YAAD;AAEE,MAAA,EAAE,EAAEA,EAFN;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,SAAS,EAAC,cAJZ;AAKE,MAAA,OAAO,EAAE,mBAAM;AACb,YAAIM,QAAJ,EAAa;AACXA,UAAAA,QAAO;AACR;AACF,OATH;AAAA,iBAUGH,IAAI,iBAAI,KAAC,IAAD;AAAM,QAAA,IAAI,EAAC;AAAX,QAVX,eAWE;AAAA,kBAAOD;AAAP,QAXF,EAYGK,YAAY,EAZf;AAAA,8BACuBP,EADvB;AAjBJ,IADF;AAmCD,CA1CD;;;AATEA,EAAAA,E;AACAE,EAAAA,Q;AACAD,EAAAA,U;AACAE,EAAAA,I;AACAC,EAAAA,Y;AACAC,EAAAA,Y;AACAC,EAAAA,O;;AA+CF,eAAeP,QAAf","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n border: none;\n background: transparent;\n padding: 16px 25px;\n\n text-decoration: none;\n text-align: left;\n align-items: center;\n display: flex;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n svg {\n margin-right: 15px;\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst InternalLink = styled(NavLink)`\n ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n margin: 0 0 0 auto;\n align-items: center;\n svg {\n margin-right: 0;\n }\n`;\n\ninterface MenuLinkProps {\n to: string;\n menuText: string;\n isExternal?: boolean;\n Icon?: any;\n notification?: boolean;\n extendedMenu?: boolean;\n onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n const getRightSide = () => (\n <IconsRightSide>\n {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n </IconsRightSide>\n );\n return (\n <li>\n {isExternal ? (\n <ExternalLink\n key={`ExternalLink_${to}`}\n href={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </ExternalLink>\n ) : (\n <InternalLink\n key={`InternalLink_${to}`}\n to={to}\n role=\"menuitem\"\n className=\"UserMenuLink\"\n onClick={() => {\n if (onClick) {\n onClick();\n }\n }}>\n {Icon && <Icon size=\"24px\" />}\n <span>{menuText}</span>\n {getRightSide()}\n </InternalLink>\n )}\n </li>\n );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}
package/dist/Toggles/ToggleButton.cjs ADDED
@@ -0,0 +1,81 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.default = exports.ToggleButton = void 0;
9
+
10
+ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
11
+
12
+ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
+
14
+ var _propTypes = _interopRequireDefault(require("prop-types"));
15
+
16
+ var _react = _interopRequireDefault(require("react"));
17
+
18
+ var _Button = require("../Button");
19
+
20
+ var _styledComponents = _interopRequireDefault(require("styled-components"));
21
+
22
+ var _Iconbutton = require("../Button/Iconbutton");
23
+
24
+ var _styles = require("../styles");
25
+
26
+ var _jsxRuntime = require("react/jsx-runtime");
27
+
28
+ var _templateObject;
29
+
30
+ var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n ", " {\n transition: all 0.1s ease-in-out;\n }\n\n &.disabled,\n &.active:not(.state-change) {\n ", " {\n background: ", ";\n }\n }\n\n &.active:not(.state-change) {\n ", ":after {\n content: '';\n position: absolute;\n left: 12px;\n bottom: 1px;\n background-color: ", ";\n border-radius: 4px;\n height: 4px;\n width: 24px;\n }\n }\n\n &.disabled:not(.state-change) {\n ", ":after {\n background: ", ";\n }\n }\n"])), _Iconbutton.IconButtonContent, _Iconbutton.IconButtonContent, _styles.COLORS.white, _Iconbutton.IconButtonContent, _styles.COLORS.primary_500, _Iconbutton.IconButtonContent, _styles.COLORS.neutral_300);
31
+
32
+ var ToggleButton = function ToggleButton(props) {
33
+ var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
34
+
35
+ var _React$useState = _react.default.useState(false),
36
+ _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
37
+ active = _React$useState2[0],
38
+ setActive = _React$useState2[1];
39
+
40
+ _react.default.useEffect(function () {
41
+ return setActive(props.active);
42
+ }, [props.active]);
43
+
44
+ var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
45
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
46
+ className: cls,
47
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
48
+ variant: 'secondary',
49
+ useTransparentBackground: true,
50
+ shape: 'circular',
51
+ action: function action() {
52
+ setActive(!active);
53
+
54
+ if (props.onChange) {
55
+ props.onChange(!active);
56
+ }
57
+ },
58
+ iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
59
+ disabled: props.disabled,
60
+ children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
61
+ })
62
+ });
63
+ };
64
+
65
+ exports.ToggleButton = ToggleButton;
66
+ ToggleButton.propTypes = {
67
+ active: _propTypes.default.bool.isRequired,
68
+ onChange: _propTypes.default.func,
69
+ disabled: _propTypes.default.bool,
70
+ defaultState: _propTypes.default.shape({
71
+ icon: _propTypes.default.node.isRequired,
72
+ color: _propTypes.default.string
73
+ }).isRequired,
74
+ activeState: _propTypes.default.shape({
75
+ icon: _propTypes.default.node.isRequired,
76
+ color: _propTypes.default.string
77
+ })
78
+ };
79
+ var _default = ToggleButton;
80
+ exports.default = _default;
81
+ //# sourceMappingURL=ToggleButton.cjs.map
package/dist/Toggles/ToggleButton.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["Wrapper","styled","div","IconButtonContent","COLORS","white","primary_500","neutral_300","ToggleButton","props","React","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,IAAMA,OAAO,GAAGC,0BAAOC,GAAV,okBACTC,6BADS,EAOPA,6BAPO,EAQOC,eAAOC,KARd,EAaPF,6BAbO,EAkBaC,eAAOE,WAlBpB,EA0BPH,6BA1BO,EA2BOC,eAAOG,WA3Bd,CAAb;;AA8CO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BC,eAAMC,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAH,iBAAMI,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACJ,KAAK,CAACG,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACH,KAAK,CAACG,MAAP,CAA/C;;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCH,KAAK,CAACO,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EP,KAAK,CAACQ,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,qBAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,qBAAC,kBAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIH,KAAK,CAACS,QAAV,EAAoB;AAClBT,UAAAA,KAAK,CAACS,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGH,KAAK,CAACO,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BV,KAAK,CAACW,YAAN,CAAmBD,KAAlD,GAA0DV,KAAK,CAACW,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAEV,KAAK,CAACQ,QAV5B;AAAA,gBAWGL,MAAM,mDAAGH,KAAK,CAACO,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BZ,KAAK,CAACW,YAAN,CAAmBC,IAAjD,GAAwDZ,KAAK,CAACW,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;eAuCaX,Y","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n ${IconButtonContent} {\n transition: all 0.1s ease-in-out;\n }\n\n &.disabled,\n &.active:not(.state-change) {\n ${IconButtonContent} {\n background: ${COLORS.white};\n }\n }\n\n &.active:not(.state-change) {\n ${IconButtonContent}:after {\n content: '';\n position: absolute;\n left: 12px;\n bottom: 1px;\n background-color: ${COLORS.primary_500};\n border-radius: 4px;\n height: 4px;\n width: 24px;\n }\n }\n\n &.disabled:not(.state-change) {\n ${IconButtonContent}:after {\n background: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface ToggleButtonState {\n icon: React.ReactNode;\n color?: string;\n}\n\nexport interface ToggleButtonProps {\n active: boolean;\n onChange?: (value: boolean) => void;\n disabled?: boolean;\n\n defaultState: ToggleButtonState;\n activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n const [active, setActive] = React.useState(false);\n\n React.useEffect(() => setActive(props.active), [props.active]);\n\n const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper className={cls}>\n <IconButton variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={() => {\n setActive(!active);\n if (props.onChange) {\n props.onChange(!active);\n }\n }}\n iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n disabled={props.disabled}>\n {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n </IconButton>\n </Wrapper>\n )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.cjs"}
package/dist/Toggles/ToggleButton.d.ts ADDED
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ export interface ToggleButtonState {
3
+ icon: React.ReactNode;
4
+ color?: string;
5
+ }
6
+ export interface ToggleButtonProps {
7
+ active: boolean;
8
+ onChange?: (value: boolean) => void;
9
+ disabled?: boolean;
10
+ defaultState: ToggleButtonState;
11
+ activeState?: ToggleButtonState;
12
+ }
13
+ export declare const ToggleButton: React.FunctionComponent<ToggleButtonProps>;
14
+ export default ToggleButton;
package/dist/Toggles/ToggleButton.js ADDED
@@ -0,0 +1,59 @@
1
+ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
+ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
+ import _pt from "prop-types";
4
+
5
+ var _templateObject;
6
+
7
+ import React from 'react';
8
+ import { IconButton } from '../Button';
9
+ import styled from 'styled-components';
10
+ import { IconButtonContent } from '../Button/Iconbutton';
11
+ import { COLORS } from '../styles';
12
+ import { jsx as _jsx } from "react/jsx-runtime";
13
+ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", " {\n transition: all 0.1s ease-in-out;\n }\n\n &.disabled,\n &.active:not(.state-change) {\n ", " {\n background: ", ";\n }\n }\n\n &.active:not(.state-change) {\n ", ":after {\n content: '';\n position: absolute;\n left: 12px;\n bottom: 1px;\n background-color: ", ";\n border-radius: 4px;\n height: 4px;\n width: 24px;\n }\n }\n\n &.disabled:not(.state-change) {\n ", ":after {\n background: ", ";\n }\n }\n"])), IconButtonContent, IconButtonContent, COLORS.white, IconButtonContent, COLORS.primary_500, IconButtonContent, COLORS.neutral_300);
14
+ export var ToggleButton = function ToggleButton(props) {
15
+ var _props$activeState$co, _props$activeState, _props$activeState$ic, _props$activeState2;
16
+
17
+ var _React$useState = React.useState(false),
18
+ _React$useState2 = _slicedToArray(_React$useState, 2),
19
+ active = _React$useState2[0],
20
+ setActive = _React$useState2[1];
21
+
22
+ React.useEffect(function () {
23
+ return setActive(props.active);
24
+ }, [props.active]);
25
+ var cls = "".concat(active ? 'active' : '', " ").concat(props.activeState ? 'state-change' : '', " ").concat(props.disabled ? 'disabled' : '');
26
+ return /*#__PURE__*/_jsx(Wrapper, {
27
+ className: cls,
28
+ children: /*#__PURE__*/_jsx(IconButton, {
29
+ variant: 'secondary',
30
+ useTransparentBackground: true,
31
+ shape: 'circular',
32
+ action: function action() {
33
+ setActive(!active);
34
+
35
+ if (props.onChange) {
36
+ props.onChange(!active);
37
+ }
38
+ },
39
+ iconColor: active ? (_props$activeState$co = (_props$activeState = props.activeState) === null || _props$activeState === void 0 ? void 0 : _props$activeState.color) !== null && _props$activeState$co !== void 0 ? _props$activeState$co : props.defaultState.color : props.defaultState.color,
40
+ disabled: props.disabled,
41
+ children: active ? (_props$activeState$ic = (_props$activeState2 = props.activeState) === null || _props$activeState2 === void 0 ? void 0 : _props$activeState2.icon) !== null && _props$activeState$ic !== void 0 ? _props$activeState$ic : props.defaultState.icon : props.defaultState.icon
42
+ })
43
+ });
44
+ };
45
+ ToggleButton.propTypes = {
46
+ active: _pt.bool.isRequired,
47
+ onChange: _pt.func,
48
+ disabled: _pt.bool,
49
+ defaultState: _pt.shape({
50
+ icon: _pt.node.isRequired,
51
+ color: _pt.string
52
+ }).isRequired,
53
+ activeState: _pt.shape({
54
+ icon: _pt.node.isRequired,
55
+ color: _pt.string
56
+ })
57
+ };
58
+ export default ToggleButton;
59
+ //# sourceMappingURL=ToggleButton.js.map
package/dist/Toggles/ToggleButton.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/Toggles/ToggleButton.tsx"],"names":["React","IconButton","styled","IconButtonContent","COLORS","Wrapper","div","white","primary_500","neutral_300","ToggleButton","props","useState","active","setActive","useEffect","cls","activeState","disabled","onChange","color","defaultState","icon"],"mappings":";;;;;;AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,iBAAR,QAAgC,sBAAhC;AACA,SAAQC,MAAR,QAAqB,WAArB;;AAEA,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAV,sjBACTH,iBADS,EAOPA,iBAPO,EAQOC,MAAM,CAACG,KARd,EAaPJ,iBAbO,EAkBaC,MAAM,CAACI,WAlBpB,EA0BPL,iBA1BO,EA2BOC,MAAM,CAACK,WA3Bd,CAAb;AA8CA,OAAO,IAAMC,YAAwD,GAAG,SAA3DA,YAA2D,CAACC,KAAD,EAAW;AAAA;;AAEjF,wBAA4BX,KAAK,CAACY,QAAN,CAAe,KAAf,CAA5B;AAAA;AAAA,MAAOC,MAAP;AAAA,MAAeC,SAAf;;AAEAd,EAAAA,KAAK,CAACe,SAAN,CAAgB;AAAA,WAAMD,SAAS,CAACH,KAAK,CAACE,MAAP,CAAf;AAAA,GAAhB,EAA+C,CAACF,KAAK,CAACE,MAAP,CAA/C;AAEA,MAAMG,GAAG,aAAMH,MAAM,GAAG,QAAH,GAAc,EAA1B,cAAgCF,KAAK,CAACM,WAAN,GAAoB,cAApB,GAAqC,EAArE,cAA2EN,KAAK,CAACO,QAAN,GAAiB,UAAjB,GAA8B,EAAzG,CAAT;AAEA,sBACE,KAAC,OAAD;AAAS,IAAA,SAAS,EAAEF,GAApB;AAAA,2BACE,KAAC,UAAD;AAAY,MAAA,OAAO,EAAE,WAArB;AACY,MAAA,wBAAwB,EAAE,IADtC;AAEY,MAAA,KAAK,EAAE,UAFnB;AAGY,MAAA,MAAM,EAAE,kBAAM;AACZF,QAAAA,SAAS,CAAC,CAACD,MAAF,CAAT;;AACA,YAAIF,KAAK,CAACQ,QAAV,EAAoB;AAClBR,UAAAA,KAAK,CAACQ,QAAN,CAAe,CAACN,MAAhB;AACD;AACF,OARb;AASY,MAAA,SAAS,EAAEA,MAAM,kDAAGF,KAAK,CAACM,WAAT,uDAAG,mBAAmBG,KAAtB,yEAA+BT,KAAK,CAACU,YAAN,CAAmBD,KAAlD,GAA0DT,KAAK,CAACU,YAAN,CAAmBD,KAT1G;AAUY,MAAA,QAAQ,EAAET,KAAK,CAACO,QAV5B;AAAA,gBAWGL,MAAM,mDAAGF,KAAK,CAACM,WAAT,wDAAG,oBAAmBK,IAAtB,yEAA8BX,KAAK,CAACU,YAAN,CAAmBC,IAAjD,GAAwDX,KAAK,CAACU,YAAN,CAAmBC;AAXpF;AADF,IADF;AAiBD,CAzBM;;AARLT,EAAAA,M;AACAM,EAAAA,Q;AACAD,EAAAA,Q;AAEAG,EAAAA,Y;AATAC,IAAAA,I;AACAF,IAAAA,K;;AASAH,EAAAA,W;AAVAK,IAAAA,I;AACAF,IAAAA,K;;;AAuCF,eAAeV,YAAf","sourcesContent":["import React from 'react';\nimport {IconButton} from '../Button';\nimport styled from 'styled-components';\nimport {IconButtonContent} from '../Button/Iconbutton';\nimport {COLORS} from '../styles';\n\nconst Wrapper = styled.div`\n ${IconButtonContent} {\n transition: all 0.1s ease-in-out;\n }\n\n &.disabled,\n &.active:not(.state-change) {\n ${IconButtonContent} {\n background: ${COLORS.white};\n }\n }\n\n &.active:not(.state-change) {\n ${IconButtonContent}:after {\n content: '';\n position: absolute;\n left: 12px;\n bottom: 1px;\n background-color: ${COLORS.primary_500};\n border-radius: 4px;\n height: 4px;\n width: 24px;\n }\n }\n\n &.disabled:not(.state-change) {\n ${IconButtonContent}:after {\n background: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport interface ToggleButtonState {\n icon: React.ReactNode;\n color?: string;\n}\n\nexport interface ToggleButtonProps {\n active: boolean;\n onChange?: (value: boolean) => void;\n disabled?: boolean;\n\n defaultState: ToggleButtonState;\n activeState?: ToggleButtonState;\n}\n\nexport const ToggleButton: React.FunctionComponent<ToggleButtonProps> = (props) => {\n\n const [active, setActive] = React.useState(false);\n\n React.useEffect(() => setActive(props.active), [props.active]);\n\n const cls = `${active ? 'active' : ''} ${props.activeState ? 'state-change' : ''} ${props.disabled ? 'disabled' : ''}`;\n\n return (\n <Wrapper className={cls}>\n <IconButton variant={'secondary'}\n useTransparentBackground={true}\n shape={'circular'}\n action={() => {\n setActive(!active);\n if (props.onChange) {\n props.onChange(!active);\n }\n }}\n iconColor={active ? props.activeState?.color ?? props.defaultState.color : props.defaultState.color}\n disabled={props.disabled}>\n {active ? props.activeState?.icon ?? props.defaultState.icon : props.defaultState.icon}\n </IconButton>\n </Wrapper>\n )\n}\n\nexport default ToggleButton;\n"],"file":"ToggleButton.js"}
package/dist/Toggles/index.cjs CHANGED
@@ -5,6 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
+ Object.defineProperty(exports, "ToggleButton", {
9
+ enumerable: true,
10
+ get: function get() {
11
+ return _ToggleButton.default;
12
+ }
13
+ });
8
14
  Object.defineProperty(exports, "ToggleSwitch", {
9
15
  enumerable: true,
10
16
  get: function get() {
@@ -13,4 +19,6 @@ Object.defineProperty(exports, "ToggleSwitch", {
13
19
  });
14
20
 
15
21
  var _ToggleSwitch = _interopRequireDefault(require("./ToggleSwitch"));
22
+
23
+ var _ToggleButton = _interopRequireDefault(require("./ToggleButton"));
16
24
  //# sourceMappingURL=index.cjs.map
package/dist/Toggles/index.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../../src/Toggles/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.cjs"}
package/dist/Toggles/index.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  import ToggleSwitch from './ToggleSwitch';
2
- export { ToggleSwitch };
2
+ import ToggleButton from './ToggleButton';
3
+ export { ToggleSwitch, ToggleButton };
package/dist/Toggles/index.js CHANGED
@@ -1,3 +1,4 @@
1
1
  import ToggleSwitch from './ToggleSwitch';
2
- export { ToggleSwitch };
2
+ import ToggleButton from './ToggleButton';
3
+ export { ToggleSwitch, ToggleButton };
3
4
  //# sourceMappingURL=index.js.map
package/dist/Toggles/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AAEA,SAASA,YAAT","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\n\nexport { ToggleSwitch };\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../../src/Toggles/index.ts"],"names":["ToggleSwitch","ToggleButton"],"mappings":"AAAA,OAAOA,YAAP,MAAyB,gBAAzB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAEA,SAAQD,YAAR,EAAsBC,YAAtB","sourcesContent":["import ToggleSwitch from './ToggleSwitch';\nimport ToggleButton from './ToggleButton';\n\nexport {ToggleSwitch, ToggleButton};\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.7.0-dev.14",
3
+ "version": "1.7.0-dev.16.full",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [