npm - @laerdal/life-react-components - Versions diffs - 5.0.0-dev.5 → 5.0.0 - Mend

@laerdal/life-react-components 5.0.0-dev.5 → 5.0.0

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 (18) hide show

package/dist/InputFields/QuickSearch.cjs +2 -2
package/dist/InputFields/QuickSearch.cjs.map +1 -1
package/dist/InputFields/QuickSearch.js +2 -2
package/dist/InputFields/QuickSearch.js.map +1 -1
package/dist/InputFields/RadioButton.cjs +6 -6
package/dist/InputFields/RadioButton.cjs.map +1 -1
package/dist/InputFields/RadioButton.js +6 -6
package/dist/InputFields/RadioButton.js.map +1 -1
package/dist/ProfileButton/ProfileButton.cjs +1 -1
package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
package/dist/ProfileButton/ProfileButton.d.ts +1 -1
package/dist/ProfileButton/ProfileButton.js +1 -1
package/dist/ProfileButton/ProfileButton.js.map +1 -1
package/dist/Tabs/Tabs.cjs +6 -6
package/dist/Tabs/Tabs.cjs.map +1 -1
package/dist/Tabs/Tabs.js +6 -6
package/dist/Tabs/Tabs.js.map +1 -1
package/package.json +1 -1

package/dist/InputFields/QuickSearch.cjs CHANGED Viewed

@@ -29,7 +29,7 @@ var Wrapper = _styledComponents["default"].div(_templateObject || (_templateObje
 }, function (props) {
   return _.COLORS.getColor('primary_800', props.theme);
 }, _Iconbutton.IconButtonStyledSecondary, function (props) {
-  return props.shouldNotInteract ? 'none' : 'auto';
+  return props.$shouldNotInteract ? 'none' : 'auto';
 });
 var QuickSearch = function QuickSearch(_ref) {
   var id = _ref.id,
@@ -119,7 +119,7 @@ var QuickSearch = function QuickSearch(_ref) {
     }
   }, [searchFieldVisible.visible, searchFieldInputRef]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Wrapper, {
-    shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
+    $shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
       ref: searchFieldRef,
       id: id,

package/dist/InputFields/QuickSearch.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{shouldNotInteract: boolean}>`\r\n width: 100%;\r\n\r\n ${StyledSearchField} {\r\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n background-color: transparent;\r\n\r\n &.small {\r\n width: 48px;\r\n }\r\n\r\n &.medium {\r\n width: 56px;\r\n }\r\n\r\n &.expanded {\r\n width: 100%;\r\n }\r\n\r\n box-shadow: none;\r\n\r\n &:hover {\r\n box-shadow: none;\r\n }\r\n\r\n &.expanded {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. /\r\n id: string;\r\n /* Optional. Current search term entered by the user. /\r\n searchTerm?: string;\r\n /* Required. Handler to be called when user modified input. /\r\n setSearchTerm: (term: string) => void;\r\n /* Required. Handler to be called when user triggers search. /\r\n enterSearch: (e: any) => void;\r\n /* Required. Handler to be called when user clears input field. /\r\n removeSearch: (e: any) => void;\r\n /* Optional. Placeholder text to be shown in the input field when there is no input. /\r\n placeholder?: string;\r\n /* Optional. ARIA label to set on the input field. /\r\n performSearchLabel?: string;\r\n /* Optional. If disabled user can not interact with the search bar. /\r\n disabled?: boolean;\r\n /* Optional. Optional onkeydown handler to be set on the input field. /\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /* Optional. Size of the component. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium;\r\n /* Optional. Margin style attribute to be set on the input field. /\r\n margin?: string;\r\n /* Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n onKeyDown,\r\n size,\r\n margin,\r\n loading,\r\n}: QuickSearchProps) => {\r\n const theme = useTheme();\r\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n visible: false,\r\n });\r\n\r\n const handleClickOutside = (e: any) => {\r\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (onKeyDown) {\r\n onKeyDown(e);\r\n }\r\n if (e.key === 'Escape') {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleBlur = (e: any) => {\r\n if (!searchTerm && (!e.relatedTarget \|\| !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n };\r\n\r\n const handleSearchIconAction = (e: any) => {\r\n if (!searchFieldVisible?.visible) {\r\n setSearchFieldVisible({\r\n visible: !searchFieldVisible.visible,\r\n focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n });\r\n }\r\n };\r\n\r\n // set search field visibility on search term change\r\n React.useEffect(() => {\r\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n setSearchFieldVisible({ visible: true, focus: false });\r\n }\r\n }, [searchTerm, searchFieldVisible]);\r\n\r\n // register click outside handler\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside);\r\n };\r\n }, []);\r\n\r\n // focus search input on visibility change\r\n React.useEffect(() => {\r\n if (searchFieldVisible?.visible) {\r\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n }\r\n }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n return (\r\n <Wrapper shouldNotInteract={searchFieldVisible?.visible}>\r\n <SearchField\r\n ref={searchFieldRef}\r\n id={id}\r\n size={size}\r\n searchTerm={searchTerm}\r\n style={{\r\n margin: margin,\r\n }}\r\n onBlur={handleBlur}\r\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n {searchFieldVisible?.visible && (\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n ref={searchFieldInputRef}\r\n disabled={disabled}\r\n onKeyDown={handleKeyDown}\r\n size={size}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n enterSearch={enterSearch}\r\n focusParentRefs={[searchFieldRef]}\r\n />\r\n )}\r\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n <IconButton\r\n id={`${id}_Searchbutton`}\r\n dataTestId={`${id}_Searchbutton`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n action={handleSearchIconAction}>\r\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm \|\| !searchFieldVisible?.visible}>\r\n <IconButton\r\n id={`${id}_Clearicon`}\r\n dataTestId={`${id}_Clearicon`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n removeSearch(e);\r\n searchFieldInputRef?.current?.focus();\r\n }}>\r\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </StyledIcon>\r\n {loading && searchFieldVisible?.visible && (\r\n <StyledIcon className={size ? size : ''}>\r\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n </StyledIcon>\r\n )}\r\n </SearchField>\r\n </Wrapper>\r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"QuickSearch.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_Iconbutton","_styling","_types","_","_icons","_SearchBarInput","_interopRequireDefault","_SearchField","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Wrapper","styled","div","_taggedTemplateLiteral2","StyledSearchField","props","COLORS","getColor","theme","IconButtonStyledSecondary","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","useTheme","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray2","searchFieldVisible","setSearchFieldVisible","handleClickOutside","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","jsx","children","jsxs","ref","style","onBlur","className","term","focusParentRefs","SearchIconWrapper","role","concat","dataTestId","variant","shape","tabIndex","action","SystemIcons","Search","color","StyledIcon","hidden","_searchFieldInputRef$2","Clear","LoadingIndicator","Size","Small","propTypes","_propTypes","string","isRequired","func","bool","_default","exports"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n width: 100%;\r\n\r\n ${StyledSearchField} {\r\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n background-color: transparent;\r\n\r\n &.small {\r\n width: 48px;\r\n }\r\n\r\n &.medium {\r\n width: 56px;\r\n }\r\n\r\n &.expanded {\r\n width: 100%;\r\n }\r\n\r\n box-shadow: none;\r\n\r\n &:hover {\r\n box-shadow: none;\r\n }\r\n\r\n &.expanded {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. /\r\n id: string;\r\n /* Optional. Current search term entered by the user. /\r\n searchTerm?: string;\r\n /* Required. Handler to be called when user modified input. /\r\n setSearchTerm: (term: string) => void;\r\n /* Required. Handler to be called when user triggers search. /\r\n enterSearch: (e: any) => void;\r\n /* Required. Handler to be called when user clears input field. /\r\n removeSearch: (e: any) => void;\r\n /* Optional. Placeholder text to be shown in the input field when there is no input. /\r\n placeholder?: string;\r\n /* Optional. ARIA label to set on the input field. /\r\n performSearchLabel?: string;\r\n /* Optional. If disabled user can not interact with the search bar. /\r\n disabled?: boolean;\r\n /* Optional. Optional onkeydown handler to be set on the input field. /\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /* Optional. Size of the component. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium;\r\n /* Optional. Margin style attribute to be set on the input field. /\r\n margin?: string;\r\n /* Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n onKeyDown,\r\n size,\r\n margin,\r\n loading,\r\n}: QuickSearchProps) => {\r\n const theme = useTheme();\r\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n visible: false,\r\n });\r\n\r\n const handleClickOutside = (e: any) => {\r\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (onKeyDown) {\r\n onKeyDown(e);\r\n }\r\n if (e.key === 'Escape') {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleBlur = (e: any) => {\r\n if (!searchTerm && (!e.relatedTarget \|\| !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n };\r\n\r\n const handleSearchIconAction = (e: any) => {\r\n if (!searchFieldVisible?.visible) {\r\n setSearchFieldVisible({\r\n visible: !searchFieldVisible.visible,\r\n focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n });\r\n }\r\n };\r\n\r\n // set search field visibility on search term change\r\n React.useEffect(() => {\r\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n setSearchFieldVisible({ visible: true, focus: false });\r\n }\r\n }, [searchTerm, searchFieldVisible]);\r\n\r\n // register click outside handler\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside);\r\n };\r\n }, []);\r\n\r\n // focus search input on visibility change\r\n React.useEffect(() => {\r\n if (searchFieldVisible?.visible) {\r\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n }\r\n }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n return (\r\n <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n <SearchField\r\n ref={searchFieldRef}\r\n id={id}\r\n size={size}\r\n searchTerm={searchTerm}\r\n style={{\r\n margin: margin,\r\n }}\r\n onBlur={handleBlur}\r\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n {searchFieldVisible?.visible && (\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n ref={searchFieldInputRef}\r\n disabled={disabled}\r\n onKeyDown={handleKeyDown}\r\n size={size}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n enterSearch={enterSearch}\r\n focusParentRefs={[searchFieldRef]}\r\n />\r\n )}\r\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n <IconButton\r\n id={`${id}_Searchbutton`}\r\n dataTestId={`${id}_Searchbutton`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n action={handleSearchIconAction}>\r\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm \|\| !searchFieldVisible?.visible}>\r\n <IconButton\r\n id={`${id}_Clearicon`}\r\n dataTestId={`${id}_Clearicon`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n removeSearch(e);\r\n searchFieldInputRef?.current?.focus();\r\n }}>\r\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </StyledIcon>\r\n {loading && searchFieldVisible?.visible && (\r\n <StyledIcon className={size ? size : ''}>\r\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n </StyledIcon>\r\n )}\r\n </SearchField>\r\n </Wrapper>\r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/QuickSearch.js CHANGED Viewed

@@ -20,7 +20,7 @@ var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLi
 }, function (props) {
   return COLORS.getColor('primary_800', props.theme);
 }, IconButtonStyledSecondary, function (props) {
-  return props.shouldNotInteract ? 'none' : 'auto';
+  return props.$shouldNotInteract ? 'none' : 'auto';
 });
 var QuickSearch = function QuickSearch(_ref) {
   var id = _ref.id,
@@ -110,7 +110,7 @@ var QuickSearch = function QuickSearch(_ref) {
     }
   }, [searchFieldVisible.visible, searchFieldInputRef]);
   return /*#__PURE__*/_jsx(Wrapper, {
-    shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
+    $shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible,
     children: /*#__PURE__*/_jsxs(SearchField, {
       ref: searchFieldRef,
       id: id,

package/dist/InputFields/QuickSearch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{shouldNotInteract: boolean}>`\r\n width: 100%;\r\n\r\n ${StyledSearchField} {\r\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n background-color: transparent;\r\n\r\n &.small {\r\n width: 48px;\r\n }\r\n\r\n &.medium {\r\n width: 56px;\r\n }\r\n\r\n &.expanded {\r\n width: 100%;\r\n }\r\n\r\n box-shadow: none;\r\n\r\n &:hover {\r\n box-shadow: none;\r\n }\r\n\r\n &.expanded {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. /\r\n id: string;\r\n /* Optional. Current search term entered by the user. /\r\n searchTerm?: string;\r\n /* Required. Handler to be called when user modified input. /\r\n setSearchTerm: (term: string) => void;\r\n /* Required. Handler to be called when user triggers search. /\r\n enterSearch: (e: any) => void;\r\n /* Required. Handler to be called when user clears input field. /\r\n removeSearch: (e: any) => void;\r\n /* Optional. Placeholder text to be shown in the input field when there is no input. /\r\n placeholder?: string;\r\n /* Optional. ARIA label to set on the input field. /\r\n performSearchLabel?: string;\r\n /* Optional. If disabled user can not interact with the search bar. /\r\n disabled?: boolean;\r\n /* Optional. Optional onkeydown handler to be set on the input field. /\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /* Optional. Size of the component. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium;\r\n /* Optional. Margin style attribute to be set on the input field. /\r\n margin?: string;\r\n /* Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n onKeyDown,\r\n size,\r\n margin,\r\n loading,\r\n}: QuickSearchProps) => {\r\n const theme = useTheme();\r\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n visible: false,\r\n });\r\n\r\n const handleClickOutside = (e: any) => {\r\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (onKeyDown) {\r\n onKeyDown(e);\r\n }\r\n if (e.key === 'Escape') {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleBlur = (e: any) => {\r\n if (!searchTerm && (!e.relatedTarget \|\| !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n };\r\n\r\n const handleSearchIconAction = (e: any) => {\r\n if (!searchFieldVisible?.visible) {\r\n setSearchFieldVisible({\r\n visible: !searchFieldVisible.visible,\r\n focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n });\r\n }\r\n };\r\n\r\n // set search field visibility on search term change\r\n React.useEffect(() => {\r\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n setSearchFieldVisible({ visible: true, focus: false });\r\n }\r\n }, [searchTerm, searchFieldVisible]);\r\n\r\n // register click outside handler\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside);\r\n };\r\n }, []);\r\n\r\n // focus search input on visibility change\r\n React.useEffect(() => {\r\n if (searchFieldVisible?.visible) {\r\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n }\r\n }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n return (\r\n <Wrapper shouldNotInteract={searchFieldVisible?.visible}>\r\n <SearchField\r\n ref={searchFieldRef}\r\n id={id}\r\n size={size}\r\n searchTerm={searchTerm}\r\n style={{\r\n margin: margin,\r\n }}\r\n onBlur={handleBlur}\r\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n {searchFieldVisible?.visible && (\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n ref={searchFieldInputRef}\r\n disabled={disabled}\r\n onKeyDown={handleKeyDown}\r\n size={size}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n enterSearch={enterSearch}\r\n focusParentRefs={[searchFieldRef]}\r\n />\r\n )}\r\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n <IconButton\r\n id={`${id}_Searchbutton`}\r\n dataTestId={`${id}_Searchbutton`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n action={handleSearchIconAction}>\r\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm \|\| !searchFieldVisible?.visible}>\r\n <IconButton\r\n id={`${id}_Clearicon`}\r\n dataTestId={`${id}_Clearicon`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n removeSearch(e);\r\n searchFieldInputRef?.current?.focus();\r\n }}>\r\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </StyledIcon>\r\n {loading && searchFieldVisible?.visible && (\r\n <StyledIcon className={size ? size : ''}>\r\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n </StyledIcon>\r\n )}\r\n </SearchField>\r\n </Wrapper>\r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"QuickSearch.js","names":["React","styled","useTheme","IconButton","IconButtonStyledSecondary","SearchIconWrapper","StyledIcon","Size","COLORS","LoadingIndicator","SystemIcons","SearchBarInput","SearchField","StyledSearchField","jsx","_jsx","jsxs","_jsxs","Wrapper","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","$shouldNotInteract","QuickSearch","_ref","id","searchTerm","setSearchTerm","enterSearch","removeSearch","placeholder","performSearchLabel","disabled","onKeyDown","size","margin","loading","searchFieldRef","useRef","searchFieldInputRef","_React$useState","useState","visible","_React$useState2","_slicedToArray","searchFieldVisible","setSearchFieldVisible","handleClickOutside","e","current","contains","target","length","handleKeyDown","key","handleBlur","_searchFieldRef$curre","relatedTarget","handleSearchIconAction","focus","detail","useEffect","document","addEventListener","removeEventListener","_searchFieldInputRef$","focusVisible","children","ref","style","onBlur","className","term","focusParentRefs","role","concat","dataTestId","variant","shape","tabIndex","action","Search","color","hidden","_searchFieldInputRef$2","Clear","Small","propTypes","_pt","string","isRequired","func","bool"],"sources":["../../src/InputFields/QuickSearch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\n\r\nimport IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';\r\nimport { SearchIconWrapper, StyledIcon } from './styling';\r\nimport { Size } from '../types';\r\nimport { COLORS, LoadingIndicator } from '..';\r\nimport { SystemIcons } from '../icons';\r\nimport SearchBarInput from './components/SearchBarInput';\r\nimport SearchField, { StyledSearchField } from './components/SearchField';\r\n\r\nconst Wrapper = styled.div<{$shouldNotInteract: boolean}>`\r\n width: 100%;\r\n\r\n ${StyledSearchField} {\r\n transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\r\n\r\n background-color: transparent;\r\n\r\n &.small {\r\n width: 48px;\r\n }\r\n\r\n &.medium {\r\n width: 56px;\r\n }\r\n\r\n &.expanded {\r\n width: 100%;\r\n }\r\n\r\n box-shadow: none;\r\n\r\n &:hover {\r\n box-shadow: none;\r\n }\r\n\r\n &.expanded {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n box-shadow: inset 0 0 0 1px ${props => COLORS.getColor('neutral_400', props.theme)};\r\n }\r\n\r\n &.expanded:hover,\r\n &.expanded:focus-within {\r\n box-shadow: inset 0 0 0 2px ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n\r\n ${IconButtonStyledSecondary} {\r\n pointer-events: ${(props) => (props.$shouldNotInteract ? 'none' : 'auto')};\r\n }\r\n`;\r\n\r\nexport type QuickSearchProps = {\r\n /** Required. Id of the component. /\r\n id: string;\r\n /* Optional. Current search term entered by the user. /\r\n searchTerm?: string;\r\n /* Required. Handler to be called when user modified input. /\r\n setSearchTerm: (term: string) => void;\r\n /* Required. Handler to be called when user triggers search. /\r\n enterSearch: (e: any) => void;\r\n /* Required. Handler to be called when user clears input field. /\r\n removeSearch: (e: any) => void;\r\n /* Optional. Placeholder text to be shown in the input field when there is no input. /\r\n placeholder?: string;\r\n /* Optional. ARIA label to set on the input field. /\r\n performSearchLabel?: string;\r\n /* Optional. If disabled user can not interact with the search bar. /\r\n disabled?: boolean;\r\n /* Optional. Optional onkeydown handler to be set on the input field. /\r\n onKeyDown?: (e: React.KeyboardEvent) => void;\r\n /* Optional. Size of the component. Defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium;\r\n /* Optional. Margin style attribute to be set on the input field. /\r\n margin?: string;\r\n /* Optional. If set then loading indicator will be shown on the right side of the input field. */\r\n loading?: boolean;\r\n};\r\n\r\nconst QuickSearch: React.FunctionComponent<QuickSearchProps> = ({\r\n id,\r\n searchTerm,\r\n setSearchTerm,\r\n enterSearch,\r\n removeSearch,\r\n placeholder,\r\n performSearchLabel,\r\n disabled,\r\n onKeyDown,\r\n size,\r\n margin,\r\n loading,\r\n}: QuickSearchProps) => {\r\n const theme = useTheme();\r\n const searchFieldRef = React.useRef<HTMLDivElement>(null);\r\n const searchFieldInputRef = React.useRef<HTMLInputElement>(null);\r\n\r\n const [searchFieldVisible, setSearchFieldVisible] = React.useState<{ visible: boolean; focus?: boolean }>({\r\n visible: false,\r\n });\r\n\r\n const handleClickOutside = (e: any) => {\r\n if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleKeyDown = (e: any) => {\r\n if (onKeyDown) {\r\n onKeyDown(e);\r\n }\r\n if (e.key === 'Escape') {\r\n if (searchFieldVisible?.visible && !searchTerm?.length) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n }\r\n };\r\n\r\n const handleBlur = (e: any) => {\r\n if (!searchTerm && (!e.relatedTarget \|\| !searchFieldRef.current?.contains(e.relatedTarget))) {\r\n setSearchFieldVisible({ visible: false });\r\n }\r\n };\r\n\r\n const handleSearchIconAction = (e: any) => {\r\n if (!searchFieldVisible?.visible) {\r\n setSearchFieldVisible({\r\n visible: !searchFieldVisible.visible,\r\n focus: !searchFieldVisible.visible && e?.detail !== 1,\r\n });\r\n }\r\n };\r\n\r\n // set search field visibility on search term change\r\n React.useEffect(() => {\r\n if (!!searchTerm?.length && !searchFieldVisible?.visible) {\r\n setSearchFieldVisible({ visible: true, focus: false });\r\n }\r\n }, [searchTerm, searchFieldVisible]);\r\n\r\n // register click outside handler\r\n React.useEffect(() => {\r\n document.addEventListener('click', handleClickOutside);\r\n return () => {\r\n document.removeEventListener('click', handleClickOutside);\r\n };\r\n }, []);\r\n\r\n // focus search input on visibility change\r\n React.useEffect(() => {\r\n if (searchFieldVisible?.visible) {\r\n searchFieldInputRef?.current?.focus({ focusVisible: searchFieldVisible.focus } as any);\r\n }\r\n }, [searchFieldVisible.visible, searchFieldInputRef]);\r\n\r\n return (\r\n <Wrapper $shouldNotInteract={searchFieldVisible?.visible}>\r\n <SearchField\r\n ref={searchFieldRef}\r\n id={id}\r\n size={size}\r\n searchTerm={searchTerm}\r\n style={{\r\n margin: margin,\r\n }}\r\n onBlur={handleBlur}\r\n className={searchFieldVisible?.visible ? 'expanded' : ''}>\r\n {searchFieldVisible?.visible && (\r\n <SearchBarInput\r\n placeholder={disabled ? '' : placeholder}\r\n id={id}\r\n ref={searchFieldInputRef}\r\n disabled={disabled}\r\n onKeyDown={handleKeyDown}\r\n size={size}\r\n setSearchTerm={(term: string) => setSearchTerm(term)}\r\n searchTerm={searchTerm}\r\n enterSearch={enterSearch}\r\n focusParentRefs={[searchFieldRef]}\r\n />\r\n )}\r\n <SearchIconWrapper className={size ? size : ''} role=\"button\" aria-label={performSearchLabel}>\r\n <IconButton\r\n id={`${id}_Searchbutton`}\r\n dataTestId={`${id}_Searchbutton`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n tabIndex={searchFieldVisible?.visible ? -1 : 0}\r\n action={handleSearchIconAction}>\r\n <SystemIcons.Search size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </SearchIconWrapper>\r\n <StyledIcon className={size ? size : ''} role=\"button\" hidden={!searchTerm \|\| !searchFieldVisible?.visible}>\r\n <IconButton\r\n id={`${id}_Clearicon`}\r\n dataTestId={`${id}_Clearicon`}\r\n variant=\"secondary\"\r\n shape=\"circular\"\r\n action={(e) => {\r\n removeSearch(e);\r\n searchFieldInputRef?.current?.focus();\r\n }}>\r\n <SystemIcons.Clear size=\"24px\" color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('neutral_600', theme)} />\r\n </IconButton>\r\n </StyledIcon>\r\n {loading && searchFieldVisible?.visible && (\r\n <StyledIcon className={size ? size : ''}>\r\n <LoadingIndicator size={Size.Small} color={COLORS.getColor('neutral_600', theme)} />\r\n </StyledIcon>\r\n )}\r\n </SearchField>\r\n </Wrapper>\r\n );\r\n};\r\n\r\nexport default QuickSearch;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/RadioButton.cjs CHANGED Viewed

@@ -24,11 +24,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var StyledRadioButton = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, function (props) {
   return _styles.COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
+  return props.$selected ? _styles.COLORS.getColor('primary_500', props.theme) : props.$invalid ? _styles.COLORS.getColor('critical_400', props.theme) : _styles.COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
   return (0, _styles.ComponentXXSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.getColor('black', props.theme));
 }, function (props) {
@@ -80,18 +80,18 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   size = (_size = size) !== null && _size !== void 0 ? _size : _types.Size.Medium;
   var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StyledRadioButton, _objectSpread(_objectSpread({
-    margin: margin,
+    $margin: margin,
     ref: ref,
     onClick: function onClick() {
       return !disabled && select(!selected);
     },
     onMouseDown: _common.defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
-    disabled: disabled,
+    $disabled: disabled,
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    invalid: invalid,
-    selected: selected
+    $invalid: invalid,
+    $selected: selected
   }, rest), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: 'radio-button-icon',

package/dist/InputFields/RadioButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","margin","concat","COLORS","getColor","theme","selected","invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'className' \| 'onClick' \| 'onMouseDown' \| 'onKeyDown'> & {\r\n /** Optional. Id of the component /\r\n id?: string;\r\n /* Required. Current state of the component. /\r\n selected: boolean;\r\n /* Required. Handler to be called when user selects/unselected the radio button. /\r\n select: (selected: boolean) => void;\r\n /* Optional. Label to be shown on the right side of the radio button. /\r\n label?: string;\r\n /* Optional. Secondary label to be shown under the main 'label' /\r\n additionalLabel?: string;\r\n /* Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. /\r\n invalid?: boolean;\r\n /* Optional. If disabled, user can not interact with the component. /\r\n disabled?: boolean;\r\n /* Optional. If set, then 'pointer-events: none' will be set on the component. /\r\n iconPointerEventsTransparent?: boolean;\r\n /* Optional. Margin style attribute to be set on the top level tag of the component. /\r\n margin?: string;\r\n /* Optional. Size of the radio button, defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Optional. TabIndex attribute to be set on the component. /\r\n tabIndexVal?: number;\r\n /* Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className \|\| ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n invalid={invalid}\r\n selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,KAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAJ,OAAA;AACA,IAAAK,MAAA,GAAAL,OAAA;AAEA,IAAAM,OAAA,GAAAN,OAAA;AAAoD,IAAAO,WAAA,GAAAP,OAAA;AAAA,IAAAQ,SAAA;AAAA,IAAAC,eAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,yBAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAZ,wBAAAY,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,gBAAAK,OAAA,CAAAL,CAAA,0BAAAA,CAAA,sBAAAA,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,cAAAR,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,SAAAW,QAAAnB,CAAA,EAAAE,CAAA,QAAAC,CAAA,GAAAQ,MAAA,CAAAS,IAAA,CAAApB,CAAA,OAAAW,MAAA,CAAAU,qBAAA,QAAAC,CAAA,GAAAX,MAAA,CAAAU,qBAAA,CAAArB,CAAA,GAAAE,CAAA,KAAAoB,CAAA,GAAAA,CAAA,CAAAC,MAAA,WAAArB,CAAA,WAAAS,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAE,CAAA,EAAAsB,UAAA,OAAArB,CAAA,CAAAsB,IAAA,CAAAC,KAAA,CAAAvB,CAAA,EAAAmB,CAAA,YAAAnB,CAAA;AAAA,SAAAwB,cAAA3B,CAAA,aAAAE,CAAA,MAAAA,CAAA,GAAA0B,SAAA,CAAAC,MAAA,EAAA3B,CAAA,UAAAC,CAAA,WAAAyB,SAAA,CAAA1B,CAAA,IAAA0B,SAAA,CAAA1B,CAAA,QAAAA,CAAA,OAAAiB,OAAA,CAAAR,MAAA,CAAAR,CAAA,OAAA2B,OAAA,WAAA5B,CAAA,QAAA6B,gBAAA,aAAA/B,CAAA,EAAAE,CAAA,EAAAC,CAAA,CAAAD,CAAA,SAAAS,MAAA,CAAAqB,yBAAA,GAAArB,MAAA,CAAAsB,gBAAA,CAAAjC,CAAA,EAAAW,MAAA,CAAAqB,yBAAA,CAAA7B,CAAA,KAAAgB,OAAA,CAAAR,MAAA,CAAAR,CAAA,GAAA2B,OAAA,WAAA5B,CAAA,IAAAS,MAAA,CAAAC,cAAA,CAAAZ,CAAA,EAAAE,CAAA,EAAAS,MAAA,CAAAE,wBAAA,CAAAV,CAAA,EAAAD,CAAA,iBAAAF,CAAA;AAEpD,IAAMkC,iBAAiB,GAAGC,4BAAM,CAACC,GAAG,CAAAtC,eAAA,KAAAA,eAAA,OAAAuC,uBAAA,wpDAMhC,UAAAC,KAAK;EAAA,OAAKA,KAAK,CAACC,MAAM,cAAAC,MAAA,CAAcF,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAGlD,UAAAD,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAiB1C,UAAAL,KAAK;EAAA,OAAKA,KAAK,CAACM,QAAQ,GAAGH,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC,GAAGL,KAAK,CAACO,OAAO,GAAGJ,cAAM,CAACC,QAAQ,CAAC,cAAc,EAAEJ,KAAK,CAACK,KAAK,CAAC,GAAGF,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,CAAC,EAc3L,UAAAL,KAAK;EAAA,OAAI,IAAAQ,2BAAmB,EAACC,0BAAkB,CAACC,OAAO,EAAEP,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAAA,GAKjG,UAAAL,KAAK;EAAA,OAAI,IAAAW,yBAAiB,EAACF,0BAAkB,CAACC,OAAO,EAAEP,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAAA,GAO7F,UAAAL,KAAK;EAAA,OAAI,IAAAY,yBAAiB,EAACH,0BAAkB,CAACC,OAAO,EAAEP,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAAA,GAO7F,UAAAL,KAAK;EAAA,OAAI,IAAAa,yBAAiB,EAACJ,0BAAkB,CAACC,OAAO,EAAEP,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC,CAAC;AAAA,GAO7FS,mBAAW,EAKS,UAAAd,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAG5D,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAOjD,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAGvD,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAQxD,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAQvC,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,OAAO,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAIzD,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAMzC,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,YAAY,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,GAG5D,UAAAL,KAAK;EAAA,OAAIG,cAAM,CAACC,QAAQ,CAAC,aAAa,EAAEJ,KAAK,CAACK,KAAK,CAAC;AAAA,EAIpE;AA6BD,IAAMU,WAAW,gBAAGlE,KAAK,CAACmE,UAAU,CAAmC,UAAAC,IAAA,EAeWC,GAAG,EAAK;EAAA,IAAAC,KAAA;EAAA,IAd3BC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFd,QAAQ,GAAAW,IAAA,CAARX,QAAQ;IACRe,KAAK,GAAAJ,IAAA,CAALI,KAAK;IACLC,eAAe,GAAAL,IAAA,CAAfK,eAAe;IACff,OAAO,GAAAU,IAAA,CAAPV,OAAO;IACPgB,MAAM,GAAAN,IAAA,CAANM,MAAM;IACNC,QAAQ,GAAAP,IAAA,CAARO,QAAQ;IACRvB,MAAM,GAAAgB,IAAA,CAANhB,MAAM;IACNwB,4BAA4B,GAAAR,IAAA,CAA5BQ,4BAA4B;IAC5BC,IAAI,GAAAT,IAAA,CAAJS,IAAI;IACJC,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,SAAS,GAAAX,IAAA,CAATW,SAAS;IACTC,UAAU,GAAAZ,IAAA,CAAVY,UAAU;IACPC,IAAI,OAAAC,yBAAA,aAAAd,IAAA,EAAA1D,SAAA;EAEpE,IAAMyE,UAAU,GAAG,SAAbA,UAAUA,CAAItE,CAAM,EAAK;IAC7B,IAAIA,CAAC,CAACuE,OAAO,KAAK,EAAE,IAAI,CAACT,QAAQ,EAAE;MACjCD,MAAM,CAAC,CAACjB,QAAQ,CAAC;IACnB;EACF,CAAC;EAEDoB,IAAI,IAAAP,KAAA,GAAGO,IAAI,cAAAP,KAAA,cAAAA,KAAA,GAAIe,WAAI,CAACC,MAAM;EAE1B,IAAMC,GAAG,MAAAlC,MAAA,CAAMwB,IAAI,OAAAxB,MAAA,CAAI0B,SAAS,IAAI,EAAE,OAAA1B,MAAA,CAAIsB,QAAQ,GAAG,WAAW,GAAG,EAAE,CAAE;EAEvE,oBACE,IAAAlE,WAAA,CAAA+E,IAAA,EAACzC,iBAAiB,EAAAP,aAAA,CAAAA,aAAA;IACCY,MAAM,EAAEA,MAAO;IACfiB,GAAG,EAAEA,GAAI;IACToB,OAAO,EAAE,SAAAA,QAAA;MAAA,OAAM,CAACd,QAAQ,IAAID,MAAM,CAAC,CAACjB,QAAQ,CAAC;IAAA,CAAC;IAC9CiC,WAAW,EAAEC,iCAA0B;IACvCC,SAAS,EAAET,UAAW;IACtBR,QAAQ,EAAEA,QAAS;IACnBI,SAAS,EAAEQ,GAAI;IACfM,QAAQ,EAAElB,QAAQ,GAAG,CAAC,CAAC,GAAIG,WAAW,GAAGA,WAAW,GAAG,CAAG;IAC1DpB,OAAO,EAAEA,OAAQ;IACjBD,QAAQ,EAAEA;EAAS,GACfwB,IAAI;IAAAa,QAAA,gBACzB,IAAArF,WAAA,CAAA+E,IAAA;MAAKT,SAAS,EAAE,mBAAoB;MAACR,EAAE,EAAEA,EAAG;MAAC,eAAaS,UAAW;MAAAc,QAAA,GAClErC,QAAQ,iBAAI,IAAAhD,WAAA,CAAAsF,GAAA,EAAC1F,MAAA,CAAA2F,WAAW,CAACC,aAAa;QAAClB,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACC,IAAI,EAAC;MAAM,CAAC,CAAC,EACzH,CAACpB,QAAQ,iBACR,IAAAhD,WAAA,CAAAsF,GAAA,EAAC1F,MAAA,CAAA2F,WAAW,CAACE,cAAc;QAACnB,SAAS,EAAEH,4BAA4B,GAAG,oBAAoB,GAAG,EAAG;QAACC,IAAI,EAAC;MAAM,CAAC,CAAC;IAAA,CAC7G,CAAC,eACN,IAAApE,WAAA,CAAA+E,IAAA;MAAKT,SAAS,EAAE,oBAAqB;MAAAe,QAAA,GAClCtB,KAAK,iBAAI,IAAA/D,WAAA,CAAAsF,GAAA;QAAOI,OAAO,EAAE5B,EAAG;QAAAuB,QAAA,EAAEtB;MAAK,CAAQ,CAAC,EAC5CC,eAAe,KAAK2B,SAAS,iBAAI,IAAA3F,WAAA,CAAAsF,GAAA;QAAAD,QAAA,EAAOrB;MAAe,CAAO,CAAC;IAAA,CAC7D,CAAC;EAAA,IApBgBF,EAqBL,CAAC;AAExB,CAAC,CAAC;AAACL,WAAA,CAAAmC,SAAA;EA3ED9B,EAAE,EAAA+B,UAAA,YAAAC,MAAA;EAEF9C,QAAQ,EAAA6C,UAAA,YAAAE,IAAA,CAAAC,UAAA;EAER/B,MAAM,EAAA4B,UAAA,YAAAI,IAAA,CAAAD,UAAA;EAENjC,KAAK,EAAA8B,UAAA,YAAAC,MAAA;EAEL9B,eAAe,EAAA6B,UAAA,YAAAC,MAAA;EAEf7C,OAAO,EAAA4C,UAAA,YAAAE,IAAA;EAEP7B,QAAQ,EAAA2B,UAAA,YAAAE,IAAA;EAER5B,4BAA4B,EAAA0B,UAAA,YAAAE,IAAA;EAE5BpD,MAAM,EAAAkD,UAAA,YAAAC,MAAA;EAINzB,WAAW,EAAAwB,UAAA,YAAAK,MAAA;EAEX5B,SAAS,EAAAuB,UAAA,YAAAC;AAAA;AAAA,IAAAK,QAAA,GAuDI1C,WAAW;AAAA2C,OAAA,cAAAD,QAAA","ignoreList":[]}
1	+ {"version":3,"file":"RadioButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_icons","_styles","_types","_common","_jsxRuntime","_excluded","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","StyledRadioButton","styled","div","_taggedTemplateLiteral2","props","$margin","concat","COLORS","getColor","theme","$selected","$invalid","ComponentXXSStyling","ComponentTextStyle","Regular","ComponentSStyling","ComponentMStyling","ComponentLStyling","focusStyles","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties2","onKeyPress","keyCode","Size","Medium","cls","jsxs","onClick","onMouseDown","defaultOnMouseDownHandler","onKeyDown","$disabled","tabIndex","children","jsx","SystemIcons","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_propTypes","string","bool","isRequired","func","number","_default","exports"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'className' \| 'onClick' \| 'onMouseDown' \| 'onKeyDown'> & {\r\n /** Optional. Id of the component /\r\n id?: string;\r\n /* Required. Current state of the component. /\r\n selected: boolean;\r\n /* Required. Handler to be called when user selects/unselected the radio button. /\r\n select: (selected: boolean) => void;\r\n /* Optional. Label to be shown on the right side of the radio button. /\r\n label?: string;\r\n /* Optional. Secondary label to be shown under the main 'label' /\r\n additionalLabel?: string;\r\n /* Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. /\r\n invalid?: boolean;\r\n /* Optional. If disabled, user can not interact with the component. /\r\n disabled?: boolean;\r\n /* Optional. If set, then 'pointer-events: none' will be set on the component. /\r\n iconPointerEventsTransparent?: boolean;\r\n /* Optional. Margin style attribute to be set on the top level tag of the component. /\r\n margin?: string;\r\n /* Optional. Size of the radio button, defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Optional. TabIndex attribute to be set on the component. /\r\n tabIndexVal?: number;\r\n /* Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className \|\| ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/RadioButton.js CHANGED Viewed

@@ -16,11 +16,11 @@ import { defaultOnMouseDownHandler } from '../common';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var StyledRadioButton = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
+  return props.$margin ? "margin: ".concat(props.$margin, ";") : '';
 }, function (props) {
   return COLORS.getColor('black', props.theme);
 }, function (props) {
-  return props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
+  return props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme);
 }, function (props) {
   return ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme));
 }, function (props) {
@@ -72,18 +72,18 @@ var RadioButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   size = (_size = size) !== null && _size !== void 0 ? _size : Size.Medium;
   var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
   return /*#__PURE__*/_jsxs(StyledRadioButton, _objectSpread(_objectSpread({
-    margin: margin,
+    $margin: margin,
     ref: ref,
     onClick: function onClick() {
       return !disabled && select(!selected);
     },
     onMouseDown: defaultOnMouseDownHandler,
     onKeyDown: onKeyPress,
-    disabled: disabled,
+    $disabled: disabled,
     className: cls,
     tabIndex: disabled ? -1 : tabIndexVal ? tabIndexVal : 0,
-    invalid: invalid,
-    selected: selected
+    $invalid: invalid,
+    $selected: selected
   }, rest), {}, {
     children: [/*#__PURE__*/_jsxs("div", {
       className: 'radio-button-icon',

package/dist/InputFields/RadioButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","margin","concat","getColor","theme","selected","invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ margin?: string, disabled?: boolean, invalid?: boolean, selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.margin ? `margin: ${props.margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.selected ? COLORS.getColor('primary_500', props.theme) : props.invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'className' \| 'onClick' \| 'onMouseDown' \| 'onKeyDown'> & {\r\n /** Optional. Id of the component /\r\n id?: string;\r\n /* Required. Current state of the component. /\r\n selected: boolean;\r\n /* Required. Handler to be called when user selects/unselected the radio button. /\r\n select: (selected: boolean) => void;\r\n /* Optional. Label to be shown on the right side of the radio button. /\r\n label?: string;\r\n /* Optional. Secondary label to be shown under the main 'label' /\r\n additionalLabel?: string;\r\n /* Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. /\r\n invalid?: boolean;\r\n /* Optional. If disabled, user can not interact with the component. /\r\n disabled?: boolean;\r\n /* Optional. If set, then 'pointer-events: none' will be set on the component. /\r\n iconPointerEventsTransparent?: boolean;\r\n /* Optional. Margin style attribute to be set on the top level tag of the component. /\r\n margin?: string;\r\n /* Optional. Size of the radio button, defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Optional. TabIndex attribute to be set on the component. /\r\n tabIndexVal?: number;\r\n /* Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className \|\| ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n invalid={invalid}\r\n selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","jsx","_jsx","jsxs","_jsxs","StyledRadioButton","div","_templateObject","_taggedTemplateLiteral","props","$margin","concat","getColor","theme","$selected","$invalid","Regular","RadioButton","forwardRef","_ref","ref","_size","id","selected","label","additionalLabel","invalid","select","disabled","margin","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","_objectWithoutProperties","_excluded","onKeyPress","e","keyCode","Medium","cls","_objectSpread","onClick","onMouseDown","onKeyDown","$disabled","tabIndex","children","RadioButtonOn","RadioButtonOff","htmlFor","undefined","propTypes","_pt","string","bool","isRequired","func","number"],"sources":["../../src/InputFields/RadioButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport {SystemIcons} from '../icons';\r\nimport {COLORS, ComponentTextStyle, focusStyles} from '../styles';\r\nimport {Size, Testable} from '../types';\r\nimport {ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling} from '../styles';\r\nimport {defaultOnMouseDownHandler} from '../common';\r\n\r\nconst StyledRadioButton = styled.div<{ $margin?: string, $disabled?: boolean, $invalid?: boolean, $selected?: boolean }>`\r\n display: flex;\r\n width: 100%;\r\n min-height: 48px;\r\n min-width: 48px;\r\n\r\n ${props => (props.$margin ? `margin: ${props.$margin};` : '')}\r\n cursor: pointer;\r\n\r\n color: ${props => COLORS.getColor('black', props.theme)};\r\n\r\n .pointerTransparent {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n margin: 6px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n box-sizing: border-box;\r\n height: 36px;\r\n min-width: 36px;\r\n border-radius: 50%;\r\n\r\n svg {\r\n color: ${props => (props.$selected ? COLORS.getColor('primary_500', props.theme) : props.$invalid ? COLORS.getColor('critical_400', props.theme) : COLORS.getColor('neutral_600', props.theme))};\r\n }\r\n }\r\n\r\n .radio-button-label {\r\n user-select: none;\r\n display: flex;\r\n flex-direction: column;\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n span {\r\n ${props => ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n }\r\n }\r\n\r\n &.small {\r\n ${props => ComponentSStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 14px;\r\n }\r\n }\r\n\r\n &.medium {\r\n ${props => ComponentMStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &.large {\r\n ${props => ComponentLStyling(ComponentTextStyle.Regular, COLORS.getColor('black', props.theme))}\r\n .radio-button-label {\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n &:not(.disabled):focus {\r\n ${focusStyles}\r\n }\r\n\r\n &:not(.disabled):hover {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &:not(.disabled):active {\r\n .radio-button-icon {\r\n background: ${props => COLORS.getColor('primary_100', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_800', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n &.disabled {\r\n cursor: not-allowed;\r\n\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n\r\n .radio-button-icon,\r\n .radio-button-label {\r\n pointer-events: none;\r\n }\r\n\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('white', props.theme)};\r\n }\r\n\r\n .radio-button-icon svg {\r\n color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n\r\n &.dropdown-hover:not(.disabled) {\r\n .radio-button-icon {\r\n background-color: ${props => COLORS.getColor('primary_20', props.theme)};\r\n\r\n svg {\r\n color: ${props => COLORS.getColor('primary_700', props.theme)};\r\n }\r\n }\r\n }\r\n`;\r\n\r\nexport type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' \| 'className' \| 'onClick' \| 'onMouseDown' \| 'onKeyDown'> & {\r\n /** Optional. Id of the component /\r\n id?: string;\r\n /* Required. Current state of the component. /\r\n selected: boolean;\r\n /* Required. Handler to be called when user selects/unselected the radio button. /\r\n select: (selected: boolean) => void;\r\n /* Optional. Label to be shown on the right side of the radio button. /\r\n label?: string;\r\n /* Optional. Secondary label to be shown under the main 'label' /\r\n additionalLabel?: string;\r\n /* Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. /\r\n invalid?: boolean;\r\n /* Optional. If disabled, user can not interact with the component. /\r\n disabled?: boolean;\r\n /* Optional. If set, then 'pointer-events: none' will be set on the component. /\r\n iconPointerEventsTransparent?: boolean;\r\n /* Optional. Margin style attribute to be set on the top level tag of the component. /\r\n margin?: string;\r\n /* Optional. Size of the radio button, defaults to 'medium'. /\r\n size?: Size.Small \| Size.Medium \| Size.Large;\r\n /* Optional. TabIndex attribute to be set on the component. /\r\n tabIndexVal?: number;\r\n /* Optional. Extra classname to be set on the container of the component. */\r\n className?: string;\r\n}\r\n\r\nconst RadioButton = React.forwardRef<HTMLDivElement, RadioButtonProps>(({\r\n id,\r\n selected,\r\n label,\r\n additionalLabel,\r\n invalid,\r\n select,\r\n disabled,\r\n margin,\r\n iconPointerEventsTransparent,\r\n size,\r\n tabIndexVal,\r\n className,\r\n dataTestId,\r\n ...rest\r\n }: RadioButtonProps, ref) => {\r\n const onKeyPress = (e: any) => {\r\n if (e.keyCode === 13 && !disabled) {\r\n select(!selected);\r\n }\r\n };\r\n\r\n size = size ?? Size.Medium;\r\n\r\n const cls = `${size} ${className \|\| ''} ${disabled ? ' disabled' : ''}`;\r\n\r\n return (\r\n <StyledRadioButton key={id}\r\n $margin={margin}\r\n ref={ref}\r\n onClick={() => !disabled && select(!selected)}\r\n onMouseDown={defaultOnMouseDownHandler}\r\n onKeyDown={onKeyPress}\r\n $disabled={disabled}\r\n className={cls}\r\n tabIndex={disabled ? -1 : (tabIndexVal ? tabIndexVal : 0)}\r\n $invalid={invalid}\r\n $selected={selected}\r\n {...rest}>\r\n <div className={'radio-button-icon'} id={id} data-testid={dataTestId}>\r\n {selected && <SystemIcons.RadioButtonOn className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n {!selected &&\r\n <SystemIcons.RadioButtonOff className={iconPointerEventsTransparent ? 'pointerTransparent' : ''} size=\"24px\"/>}\r\n </div>\r\n <div className={'radio-button-label'}>\r\n {label && <label htmlFor={id}>{label}</label>}\r\n {additionalLabel !== undefined && <span>{additionalLabel}</span>}\r\n </div>\r\n </StyledRadioButton>\r\n );\r\n});\r\n\r\nexport default RadioButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/ProfileButton.cjs CHANGED Viewed

@@ -27,7 +27,7 @@ var PortraitOverlay = _styledComponents["default"].div(_templateObject || (_temp
   return _.COLORS.getColor('black', props.theme);
 });
 var ProfileButtonContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), _Iconbutton.IconButtonStyledPrimary, function (props) {
-  return props.hideOnLowWidth ? 'none' : 'inline';
+  return props.$hideOnLowWidth ? 'none' : 'inline';
 }, _styles.BREAKPOINTS.MEDIUM, _Iconbutton.IconButtonContentStyles, function (props) {
   return _.COLORS.getColor('neutral_100', props.theme);
 }, function (props) {

package/dist/ProfileButton/ProfileButton.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /*\r\n Optional. The source URL of the profile picture.\r\n /\r\n portraitSrc?: string;\r\n\r\n /\r\n Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n /\r\n icon?: React.ReactNode;\r\n\r\n /\r\n Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n /\r\n initials?: string;\r\n\r\n /\r\n Required. The handler function to be called when the button is clicked.\r\n /\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /\r\n Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' \| 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) \|\|\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) \|\| <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"file":"ProfileButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_Iconbutton","_NotificationDot","_styles","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ownKeys","keys","getOwnPropertySymbols","o","filter","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","PortraitOverlay","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","ProfileButtonContainer","IconButtonStyledPrimary","$hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","exports","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties2","useTheme","renderIcon","jsxs","children","jsx","src","ComponentS","textStyle","ComponentTextStyle","Bold","color","Fragment","IconButton","action","variant","shape","NotificationDot","size","Size","Medium","propTypes","_propTypes","string","node","func","isRequired","oneOf","_default"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /*\r\n Optional. The source URL of the profile picture.\r\n /\r\n portraitSrc?: string;\r\n\r\n /\r\n Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n /\r\n icon?: React.ReactNode;\r\n\r\n /\r\n Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n /\r\n initials?: string;\r\n\r\n /\r\n Required. The handler function to be called when the button is clicked.\r\n /\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /\r\n Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' \| 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) \|\|\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) \|\| <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/ProfileButton/ProfileButton.d.ts CHANGED Viewed

@@ -22,7 +22,7 @@ export type ProfileButtonProps = {
     notificationVariant?: 'positive' | 'critical';
 } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>;
 export declare const ProfileButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    hideOnLowWidth?: boolean | undefined;
+    $hideOnLowWidth?: boolean | undefined;
 }>> & string;
 declare const ProfileButton: React.ForwardRefExoticComponent<{
     /**

package/dist/ProfileButton/ProfileButton.js CHANGED Viewed

@@ -19,7 +19,7 @@ var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTe
   return COLORS.getColor('black', props.theme);
 });
 export var ProfileButtonContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  width: 48px;\n  height: 48px;\n  display: inline;\n  user-select: none;\n  \n  ", " {\n    display: ", ";\n\n    ", " {\n      display: inline;\n    }\n\n    :disabled {\n      img {\n        filter: grayscale(100%);\n      }\n\n      ", " {\n        background-color: ", ";\n\n        svg, svg path {\n          fill: ", ";\n        }\n      }\n    }\n\n    :hover:not(:disabled):not(:active),\n    &.hover-state {\n      ", " {\n        opacity: 0.25;\n        transition: opacity 100ms ease-in-out;\n      }\n    }\n\n    :active:not(:disabled),\n    &.active-state {\n      ", " {\n        opacity: 0.5;\n        transition: opacity 0ms ease-in-out;\n      }\n    }\n  }\n"])), IconButtonStyledPrimary, function (props) {
-  return props.hideOnLowWidth ? 'none' : 'inline';
+  return props.$hideOnLowWidth ? 'none' : 'inline';
 }, BREAKPOINTS.MEDIUM, IconButtonContentStyles, function (props) {
   return COLORS.getColor('neutral_100', props.theme);
 }, function (props) {

package/dist/ProfileButton/ProfileButton.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /*\r\n Optional. The source URL of the profile picture.\r\n /\r\n portraitSrc?: string;\r\n\r\n /\r\n Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n /\r\n icon?: React.ReactNode;\r\n\r\n /\r\n Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n /\r\n initials?: string;\r\n\r\n /\r\n Required. The handler function to be called when the button is clicked.\r\n /\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /\r\n Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' \| 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) \|\|\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) \|\| <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":";;;;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,IAAIC,QAAQ,QAAQ,mBAAmB;AACpD,SAAQC,MAAM,EAAEC,UAAU,EAAEC,IAAI,QAAO,IAAI;AAC3C,SAAQC,uBAAuB,EAAEC,uBAAuB,QAAO,sBAAsB;AACrF,SAAQC,eAAe,QAAO,oBAAoB;AAClD,SAAQC,WAAW,EAAEC,UAAU,EAAEC,kBAAkB,QAAO,WAAW;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AA6BtE,IAAMC,eAAe,GAAGjB,MAAM,CAACkB,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+JAIZ,UAAAC,KAAK;EAAA,OAAInB,MAAM,CAACoB,QAAQ,CAAC,OAAO,EAAED,KAAK,CAACE,KAAK,CAAC;AAAA,EAKnE;AAED,OAAO,IAAMC,sBAAsB,GAAGxB,MAAM,CAACkB,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAL,sBAAA,irBAM5Cd,uBAAuB,EACZ,UAAAe,KAAK;EAAA,OAAKA,KAAK,CAACK,~~cAAc~~,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAC,~~EAE5DlB~~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","ignoreList":[]}
1	+ {"version":3,"file":"ProfileButton.js","names":["React","styled","useTheme","COLORS","IconButton","Size","IconButtonContentStyles","IconButtonStyledPrimary","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","PortraitOverlay","div","_templateObject","_taggedTemplateLiteral","props","getColor","theme","ProfileButtonContainer","_templateObject2","$hideOnLowWidth","MEDIUM","NotificationContainer","_templateObject3","ImageWrapper","_templateObject4","ProfileButton","forwardRef","_ref","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","rest","_objectWithoutProperties","_excluded","renderIcon","children","src","textStyle","Bold","color","_objectSpread","action","variant","shape","size","Medium","propTypes","_pt","string","node","func","isRequired","oneOf"],"sources":["../../src/ProfileButton/ProfileButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {COLORS, IconButton, Size} from '..';\r\nimport {IconButtonContentStyles, IconButtonStyledPrimary} from '../Button/Iconbutton';\r\nimport {NotificationDot} from '../NotificationDot';\r\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\r\n\r\nexport type ProfileButtonProps = {\r\n /*\r\n Optional. The source URL of the profile picture.\r\n /\r\n portraitSrc?: string;\r\n\r\n /\r\n Optional. The icon of the profile to be displayed in absence of 'portraitSrc' and 'initials'.\r\n /\r\n icon?: React.ReactNode;\r\n\r\n /\r\n Optional. The initials of the user. If provided, these will be displayed in circle in the absence of a profile picture.\r\n /\r\n initials?: string;\r\n\r\n /\r\n Required. The handler function to be called when the button is clicked.\r\n /\r\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\r\n\r\n /\r\n Optional. The variant of the notification dot. It can be 'positive' or 'critical'.\r\n */\r\n notificationVariant?: 'positive' \| 'critical';\r\n} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> ;\r\n\r\nconst PortraitOverlay = styled.div`\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n background-color: ${props => COLORS.getColor('black', props.theme)};\r\n opacity: 0;\r\n position: absolute;\r\n top: 0px;\r\n left: 0px;\r\n`;\r\n\r\nexport const ProfileButtonContainer = styled.div<{ $hideOnLowWidth?: boolean }>`\r\n width: 48px;\r\n height: 48px;\r\n display: inline;\r\n user-select: none;\r\n \r\n ${IconButtonStyledPrimary} {\r\n display: ${props => (props.$hideOnLowWidth ? 'none' : 'inline')};\r\n\r\n ${BREAKPOINTS.MEDIUM} {\r\n display: inline;\r\n }\r\n\r\n :disabled {\r\n img {\r\n filter: grayscale(100%);\r\n }\r\n\r\n ${IconButtonContentStyles} {\r\n background-color: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n\r\n svg, svg path {\r\n fill: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n }\r\n }\r\n }\r\n\r\n :hover:not(:disabled):not(:active),\r\n &.hover-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.25;\r\n transition: opacity 100ms ease-in-out;\r\n }\r\n }\r\n\r\n :active:not(:disabled),\r\n &.active-state {\r\n ${PortraitOverlay} {\r\n opacity: 0.5;\r\n transition: opacity 0ms ease-in-out;\r\n }\r\n }\r\n }\r\n`;\r\n\r\nconst NotificationContainer = styled.div`\r\n position: absolute;\r\n left: 30px;\r\n bottom: 30px;\r\n`;\r\n\r\nconst ImageWrapper = styled.div`\r\n width: 36px;\r\n height: 36px;\r\n position: relative;\r\n\r\n img {\r\n width: 100%;\r\n height: 100%;\r\n border-radius: 50%;\r\n object-fit: cover;\r\n }\r\n`;\r\n\r\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\r\n portraitSrc,\r\n icon,\r\n initials,\r\n onClick,\r\n disabled,\r\n notificationVariant,\r\n className,\r\n tabIndex,\r\n ...rest\r\n }, ref) => {\r\n const theme = useTheme();\r\n const renderIcon = () => {\r\n return (\r\n (portraitSrc && (\r\n <ImageWrapper>\r\n <img src={portraitSrc}/>\r\n <PortraitOverlay/>\r\n </ImageWrapper>\r\n )) \|\|\r\n (initials && (\r\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\r\n color={disabled ? COLORS.getColor('neutral_300', theme) : COLORS.getColor('white', theme)}>\r\n {initials}\r\n </ComponentS>\r\n )) \|\| <>{icon}</>\r\n );\r\n };\r\n\r\n return (\r\n <ProfileButtonContainer>\r\n <IconButton ref={ref}\r\n className={className}\r\n disabled={disabled}\r\n action={onClick}\r\n variant=\"primary\"\r\n tabIndex={tabIndex}\r\n shape=\"circular\"\r\n {...rest}>\r\n {renderIcon()}\r\n {notificationVariant && (\r\n <NotificationContainer>\r\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\r\n </NotificationContainer>\r\n )}\r\n </IconButton>\r\n </ProfileButtonContainer>\r\n );\r\n});\r\n\r\nexport default ProfileButton;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/Tabs.cjs CHANGED Viewed

@@ -64,22 +64,22 @@ var getBottomMargin = function getBottomMargin(size) {
   }
 };
 var Nav = _styledComponents["default"].nav(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
-  return getHeight(props.size);
+  return getHeight(props.$size);
 }, function (props) {
-  return getFontSize(props.size);
+  return getFontSize(props.$size);
 }, function (props) {
-  return getTopMargin(props.size);
+  return getTopMargin(props.$size);
 }, function (props) {
-  return getBottomMargin(props.size);
+  return getBottomMargin(props.$size);
 }, function (props) {
-  return getFontSize(props.size);
+  return getFontSize(props.$size);
 });
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     size = _ref.size;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Nav, {
     role: "tablist",
-    size: size,
+    $size: size,
     children: children
   });
 };

package/dist/Tabs/Tabs.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_types","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","_taggedTemplateLiteral2","props","Tabs","_ref","children","jsx","role","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":"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~~CAACZ~~,~~IAAI~~,CAAC;AAAA,~~GAQ7B~~,~~UAACY~~,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,~~CAACZ~~,~~IAAI~~,CAAC;AAAA,~~GACrC~~,~~UAACY~~,KAAK;EAAA,OAAKN,YAAY,CAACM,KAAK,~~CAACZ~~,~~IAAI~~,CAAC;AAAA,GAAM,~~UAACY~~,KAAK;EAAA,OAAKL,eAAe,CAACK,KAAK,~~CAACZ~~,~~IAAI~~,CAAC;AAAA,~~GAG5E~~,~~UAACY~~,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,~~CAACZ~~,~~IAAI~~,CAAC;AAAA,~~EAOlD~~;AAED,~~IAAMa~~,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA;EAAA,IAAMC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;~~IAAEf~~,IAAI,~~GAAAc~~,IAAA,~~CAAJd~~,IAAI;EAAA,oBAChE,IAAAvB,WAAA,~~CAAAuC~~,GAAA,~~EAACR~~,GAAG;~~IAACS~~,IAAI,EAAC,SAAS;~~IAACjB~~,~~IAAI~~,~~EAAEA~~,IAAK;~~IAAAe~~,QAAA,~~EAC5BA~~;EAAQ,CACN,CAAC;AAAA,CACP;AAACF,IAAA,CAAAK,SAAA;EAtFAH,QAAQ,EAAAI,UAAA,YAAAC;AAAA;AAAA,IAAAC,QAAA,GAwFKR,IAAI;AAAAS,OAAA,cAAAD,QAAA","ignoreList":[]}
1	+ {"version":3,"file":"Tabs.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_interopRequireDefault","_types","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","getHeight","size","Size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","styled","nav","_taggedTemplateLiteral2","props","$size","Tabs","_ref","children","jsx","role","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{$size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.$size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: ${(props) => getTopMargin(props.$size)} 0 ${(props) => getBottomMargin(props.$size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" $size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/Tabs/Tabs.js CHANGED Viewed

@@ -54,22 +54,22 @@ var getBottomMargin = function getBottomMargin(size) {
   }
 };
 var Nav = styled.nav(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n\n  a {\n    height: ", ";\n  }\n\n  a > div:last-of-type {\n    font-size: 12px;\n    margin: 0 0 8px 16px;\n  }\n  a > div:first-child {\n    font-size: ", ";\n    margin: ", " 0 ", " 16px;\n  }\n  a > div:only-of-type {\n    font-size: ", ";\n    margin: auto 0 auto 16px;\n  }\n\n  @media print {\n    display: none;\n  }\n"])), function (props) {
-  return getHeight(props.size);
+  return getHeight(props.$size);
 }, function (props) {
-  return getFontSize(props.size);
+  return getFontSize(props.$size);
 }, function (props) {
-  return getTopMargin(props.size);
+  return getTopMargin(props.$size);
 }, function (props) {
-  return getBottomMargin(props.size);
+  return getBottomMargin(props.$size);
 }, function (props) {
-  return getFontSize(props.size);
+  return getFontSize(props.$size);
 });
 var Tabs = function Tabs(_ref) {
   var children = _ref.children,
     size = _ref.size;
   return /*#__PURE__*/_jsx(Nav, {
     role: "tablist",
-    size: size,
+    $size: size,
     children: children
   });
 };

package/dist/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.js","names":["React","styled","Size","jsx","_jsx","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","_templateObject","_taggedTemplateLiteral","props","Tabs","_ref","children","role","propTypes","_pt","any"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: ${(props) => getTopMargin(props.size)} 0 ${(props) => getBottomMargin(props.size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,KAAK;IACd,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAChB;AACF,CAAC;AAED,IAAMI,GAAG,GAAGZ,MAAM,CAACa,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+XAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,~~CAACX~~,~~IAAI~~,CAAC;AAAA,~~GAQ7B~~,~~UAACW~~,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,~~CAACX~~,~~IAAI~~,CAAC;AAAA,~~GACrC~~,~~UAACW~~,KAAK;EAAA,OAAKN,YAAY,CAACM,KAAK,~~CAACX~~,~~IAAI~~,CAAC;AAAA,GAAM,~~UAACW~~,KAAK;EAAA,OAAKL,eAAe,CAACK,KAAK,~~CAACX~~,~~IAAI~~,CAAC;AAAA,~~GAG5E~~,~~UAACW~~,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,~~CAACX~~,~~IAAI~~,CAAC;AAAA,~~EAOlD~~;AAED,~~IAAMY~~,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA;EAAA,IAAMC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;~~IAAEd~~,IAAI,~~GAAAa~~,IAAA,~~CAAJb~~,IAAI;EAAA,oBAChEF,IAAA,CAACS,GAAG;~~IAACQ~~,IAAI,EAAC,SAAS;~~IAACf~~,~~IAAI~~,~~EAAEA~~,IAAK;~~IAAAc~~,QAAA,~~EAC5BA~~;EAAQ,CACN,CAAC;AAAA,CACP;AAACF,IAAA,CAAAI,SAAA;EAtFAF,QAAQ,EAAAG,GAAA,CAAAC;AAAA;AAwFV,eAAeN,IAAI","ignoreList":[]}
1	+ {"version":3,"file":"Tabs.js","names":["React","styled","Size","jsx","_jsx","getHeight","size","Small","Medium","Large","getFontSize","getTopMargin","getBottomMargin","Nav","nav","_templateObject","_taggedTemplateLiteral","props","$size","Tabs","_ref","children","role","propTypes","_pt","any"],"sources":["../../src/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { Size } from '../types';\r\n\r\ntype TabsProps = {\r\n children?: any;\r\n size: Size;\r\n};\r\n\r\nconst getHeight = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '48px';\r\n case Size.Medium:\r\n return '56px';\r\n case Size.Large:\r\n return '64px';\r\n default:\r\n return '48px';\r\n }\r\n};\r\n\r\nconst getFontSize = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '16px';\r\n case Size.Medium:\r\n return '18px';\r\n case Size.Large:\r\n return '20px';\r\n default:\r\n return '20px';\r\n }\r\n};\r\n\r\nconst getTopMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '6px';\r\n case Size.Medium:\r\n return '10px';\r\n case Size.Large:\r\n return '12px';\r\n default:\r\n return '12px';\r\n }\r\n};\r\n\r\nconst getBottomMargin = (size: Size) => {\r\n switch (size) {\r\n case Size.Small:\r\n return '2px';\r\n case Size.Medium:\r\n return '3px';\r\n case Size.Large:\r\n return '4px';\r\n default:\r\n return '4px';\r\n }\r\n};\r\n\r\nconst Nav = styled.nav<{$size: Size}>`\r\n display: flex;\r\n flex-direction: column;\r\n\r\n a {\r\n height: ${(props) => getHeight(props.$size)};\r\n }\r\n\r\n a > div:last-of-type {\r\n font-size: 12px;\r\n margin: 0 0 8px 16px;\r\n }\r\n a > div:first-child {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: ${(props) => getTopMargin(props.$size)} 0 ${(props) => getBottomMargin(props.$size)} 16px;\r\n }\r\n a > div:only-of-type {\r\n font-size: ${(props) => getFontSize(props.$size)};\r\n margin: auto 0 auto 16px;\r\n }\r\n\r\n @media print {\r\n display: none;\r\n }\r\n`;\r\n\r\nconst Tabs: React.FunctionComponent<TabsProps> = ({ children, size }) => (\r\n <Nav role=\"tablist\" $size={size}>\r\n {children}\r\n </Nav>\r\n);\r\n\r\nexport default Tabs;\r\n"],"mappings":";;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAASC,IAAI,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAOhC,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,IAAU,EAAK;EAChC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIJ,IAAU,EAAK;EAClC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,MAAM;IACf,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAME,YAAY,GAAG,SAAfA,YAAYA,CAAIL,IAAU,EAAK;EACnC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,MAAM;IACf,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,MAAM;IACf;MACE,OAAO,MAAM;EACjB;AACF,CAAC;AAED,IAAMG,eAAe,GAAG,SAAlBA,eAAeA,CAAIN,IAAU,EAAK;EACtC,QAAQA,IAAI;IACV,KAAKJ,IAAI,CAACK,KAAK;MACb,OAAO,KAAK;IACd,KAAKL,IAAI,CAACM,MAAM;MACd,OAAO,KAAK;IACd,KAAKN,IAAI,CAACO,KAAK;MACb,OAAO,KAAK;IACd;MACE,OAAO,KAAK;EAChB;AACF,CAAC;AAED,IAAMI,GAAG,GAAGZ,MAAM,CAACa,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,+XAKR,UAACC,KAAK;EAAA,OAAKZ,SAAS,CAACY,KAAK,CAACC,KAAK,CAAC;AAAA,GAQ9B,UAACD,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACC,KAAK,CAAC;AAAA,GACtC,UAACD,KAAK;EAAA,OAAKN,YAAY,CAACM,KAAK,CAACC,KAAK,CAAC;AAAA,GAAM,UAACD,KAAK;EAAA,OAAKL,eAAe,CAACK,KAAK,CAACC,KAAK,CAAC;AAAA,GAG9E,UAACD,KAAK;EAAA,OAAKP,WAAW,CAACO,KAAK,CAACC,KAAK,CAAC;AAAA,EAOnD;AAED,IAAMC,IAAwC,GAAG,SAA3CA,IAAwCA,CAAAC,IAAA;EAAA,IAAMC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEf,IAAI,GAAAc,IAAA,CAAJd,IAAI;EAAA,oBAChEF,IAAA,CAACS,GAAG;IAACS,IAAI,EAAC,SAAS;IAACJ,KAAK,EAAEZ,IAAK;IAAAe,QAAA,EAC7BA;EAAQ,CACN,CAAC;AAAA,CACP;AAACF,IAAA,CAAAI,SAAA;EAtFAF,QAAQ,EAAAG,GAAA,CAAAC;AAAA;AAwFV,eAAeN,IAAI","ignoreList":[]}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "5.0.0-dev.5",
+  "version": "5.0.0",
   "private": false,
   "author": "Erik Martirosyan <erik.martirosyan@laerdal.com>",
   "contributors": [],