@laerdal/life-react-components 5.0.9 → 5.1.1

package/dist/ProfileButton/ProfileButton.cjs.map

@@ -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":[]}
+{"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","default","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","exports","IconButtonStyledPrimary","$hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContentStyles","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.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
-var _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
+const _excluded = ["portraitSrc", "icon", "initials", "onClick", "disabled", "notificationVariant", "className", "tabIndex"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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) { _defineProperty(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; }
@@ -12,33 +12,25 @@ import { COLORS, IconButton, Size } from '..';
 import { IconButtonContentStyles, IconButtonStyledPrimary } from '../Button/Iconbutton';
 import { NotificationDot } from '../NotificationDot';
 import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), function (props) {
-  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';
-}, BREAKPOINTS.MEDIUM, IconButtonContentStyles, function (props) {
-  return COLORS.getColor('neutral_100', props.theme);
-}, function (props) {
-  return COLORS.getColor('neutral_300', props.theme);
-}, PortraitOverlay, PortraitOverlay);
-var NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
-var ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
-var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var portraitSrc = _ref.portraitSrc,
-    icon = _ref.icon,
-    initials = _ref.initials,
-    onClick = _ref.onClick,
-    disabled = _ref.disabled,
-    notificationVariant = _ref.notificationVariant,
-    className = _ref.className,
-    tabIndex = _ref.tabIndex,
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const PortraitOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  height: 100%;\n  border-radius: 50%;\n  background-color: ", ";\n  opacity: 0;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n"])), props => COLORS.getColor('black', props.theme));
+export const 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, props => props.$hideOnLowWidth ? 'none' : 'inline', BREAKPOINTS.MEDIUM, IconButtonContentStyles, props => COLORS.getColor('neutral_100', props.theme), props => COLORS.getColor('neutral_300', props.theme), PortraitOverlay, PortraitOverlay);
+const NotificationContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n"])));
+const ImageWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  width: 36px;\n  height: 36px;\n  position: relative;\n\n  img {\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    object-fit: cover;\n  }\n"])));
+const ProfileButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+      portraitSrc,
+      icon,
+      initials,
+      onClick,
+      disabled,
+      notificationVariant,
+      className,
+      tabIndex
+    } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var theme = useTheme();
-  var renderIcon = function renderIcon() {
+  const theme = useTheme();
+  const renderIcon = () => {
     return portraitSrc && /*#__PURE__*/_jsxs(ImageWrapper, {
       children: [/*#__PURE__*/_jsx("img", {
         src: portraitSrc

package/dist/ProfileButton/ProfileButton.js.map

@@ -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":"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","ignoreList":[]}
+{"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/ProfileButton/index.cjs

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 Object.defineProperty(exports, "ProfileButton", {
   enumerable: true,
-  get: function get() {
-    return _ProfileButton["default"];
+  get: function () {
+    return _ProfileButton.default;
   }
 });
 var _ProfileButton = _interopRequireDefault(require("./ProfileButton"));

package/dist/QuizButton/QuizButton.cjs

@@ -1,11 +1,10 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
+exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -15,71 +14,17 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _ = require("..");
 var _typography = require("../styles/typography");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"];
+const _excluded = ["text", "type", "onClick", "resultType", "id", "className", "selected", "disabled", "size"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 TextContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), function (props) {
-  return _.COLORS.getColor('accent1_20', props.theme);
-}, function (props) {
-  return props.$size === _.Size.Small ? '6px 8px' : props.$size === _.Size.Large ? '20px 16px' : '12px 16px';
-}, function (props) {
-  return props.$size === _.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : props.$size === _.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
-});
-var TextWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])([""])));
-var ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), function (props) {
-  return _.COLORS.getColor('accent1_100', props.theme);
-}, function (props) {
-  return props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px';
-}, function (props) {
-  return props.$size === _.Size.Small ? '16px' : props.$size === _.Size.Large ? '32px' : '24px';
-}, function (props) {
-  return props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px';
-}, function (props) {
-  return _.COLORS.getColor('accent1_600', props.theme);
-});
-var OptionContainer = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) {
-  return props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px';
-}, function (props) {
-  return props.$size === _.Size.Small ? '16px' : props.$size === _.Size.Large ? '32px' : '24px';
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('accent1_100', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_200', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('neutral_100', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('neutral_20', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('neutral_300', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('correct_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('correct_400', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('critical_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('critical_500', props.theme);
-}, TextContainer, function (props) {
-  return _.COLORS.getColor('warning_20', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('warning_400', props.theme);
-}, _.focusStyles, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_300', props.theme);
-}, TextContainer, function (props) {
-  return props.$isSelected ? _.COLORS.getColor('accent1_200', props.theme) : _.COLORS.getColor('accent1_100', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('accent1_700', props.theme);
-}, ButtonContainer, function (props) {
-  return _.COLORS.getColor('accent1_400', props.theme);
-}, TextContainer, function (props) {
-  return props.$isSelected ? _.COLORS.getColor('accent1_300', props.theme) : _.COLORS.getColor('accent1_200', props.theme);
-}, function (props) {
-  return _.COLORS.getColor('accent1_800', props.theme);
-});
-var renderResultContent = function renderResultContent(resultType, theme) {
+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; }
+const TextContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 0 8px 8px 0;\n  display: flex;\n  background: ", ";\n  width: 100%;\n\n  transition: background 100ms ease-in-out;\n  align-items: center;\n\n  padding: ", ";\n  ", "\n"])), props => _.COLORS.getColor('accent1_20', props.theme), props => props.$size === _.Size.Small ? '6px 8px' : props.$size === _.Size.Large ? '20px 16px' : '12px 16px', props => props.$size === _.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : props.$size === _.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null));
+const TextWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)([""])));
+const ButtonContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: 8px 0 0 8px;\n  display: flex;\n  background: ", ";\n\n  width: ", ";\n\n  transition: background 100ms ease-in-out;\n\n  .quiz-button-result-icon {\n    height: ", ";\n    width: ", ";\n  }\n\n  .radio-button-icon, .checkbox-icon {\n    margin: auto;\n    min-width: unset;\n    background: transparent;\n\n    svg {\n      color: ", ";\n    }\n\n    &:hover {\n      background: transparent;\n    }\n\n    &:active {\n      background: transparent;\n    }\n  }\n\n  .small {\n    min-width: 32px;\n    min-height: 32px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 16px;\n        width: 16px;\n      }\n    }\n  }\n\n  .medium {\n    min-width: 48px;\n    min-height: 48px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 24px;\n        width: 24px;\n      }\n    }\n  }\n\n  .large {\n    min-width: 64px;\n    min-height: 64px;\n    .radio-button-icon, .checkbox-icon {\n      svg {\n        height: 32px;\n        width: 32px;\n      }\n    }\n  }\n"])), props => _.COLORS.getColor('accent1_100', props.theme), props => props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px', props => props.$size === _.Size.Small ? '16px' : props.$size === _.Size.Large ? '32px' : '24px', props => props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px', props => _.COLORS.getColor('accent1_600', props.theme));
+const OptionContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  cursor: pointer;\n  max-width: 65ch;  \n  word-break: break-word;\n\n  min-height: ", ";\n  margin-bottom: ", ";\n\n  &.selected {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n  }\n  \n  &.disabled {\n    cursor: not-allowed;\n    \n    ", " {\n      pointer-events: none;\n      background: ", ";\n    }\n    ", " {\n      pointer-events: none;\n      background: ", ";\n      color: ", ";\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &.correct {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.incorrect {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &.partial {\n    ", " {    \n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n      svg {\n        margin: auto;\n      }\n    }\n  }\n\n  &:focus,\n  &.focus-state {\n    ", "\n  }\n\n  &:hover,\n  &.hover-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:active,\n  &.active-state {\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n    }\n  }\n\n  &:hover:not(.disabled):not(.result),\n  &.hover-state {\n    ", " {\n      background: ", ";\n    }\n    ", " {\n      background: ", ";\n    }\n    \n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:active:not(.disabled):not(.result),\n  &.active-state {\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n    ", " {\n      background: ", ";\n      transition: none;\n    }\n\n    .radio-button-icon, .checkbox-icon {\n      background: transparent;\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), props => props.$size === _.Size.Small ? '32px' : props.$size === _.Size.Large ? '64px' : '48px', props => props.$size === _.Size.Small ? '16px' : props.$size === _.Size.Large ? '32px' : '24px', TextContainer, props => _.COLORS.getColor('accent1_100', props.theme), ButtonContainer, props => _.COLORS.getColor('accent1_200', props.theme), ButtonContainer, props => _.COLORS.getColor('neutral_100', props.theme), TextContainer, props => _.COLORS.getColor('neutral_20', props.theme), props => _.COLORS.getColor('neutral_300', props.theme), TextContainer, props => _.COLORS.getColor('correct_20', props.theme), ButtonContainer, props => _.COLORS.getColor('correct_400', props.theme), TextContainer, props => _.COLORS.getColor('critical_20', props.theme), ButtonContainer, props => _.COLORS.getColor('critical_500', props.theme), TextContainer, props => _.COLORS.getColor('warning_20', props.theme), ButtonContainer, props => _.COLORS.getColor('warning_400', props.theme), _.focusStyles, ButtonContainer, props => _.COLORS.getColor('accent1_300', props.theme), TextContainer, props => props.$isSelected ? _.COLORS.getColor('accent1_200', props.theme) : _.COLORS.getColor('accent1_100', props.theme), props => _.COLORS.getColor('accent1_700', props.theme), ButtonContainer, props => _.COLORS.getColor('accent1_400', props.theme), TextContainer, props => props.$isSelected ? _.COLORS.getColor('accent1_300', props.theme) : _.COLORS.getColor('accent1_200', props.theme), props => _.COLORS.getColor('accent1_800', props.theme));
+const renderResultContent = (resultType, theme) => {
   switch (resultType) {
     case 'correct':
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.SystemIcons.CheckMark, {
@@ -98,21 +43,20 @@ var renderResultContent = function renderResultContent(resultType, theme) {
       });
   }
 };
-var QuizButton = function QuizButton(_ref) {
-  var text = _ref.text,
-    type = _ref.type,
-    onClick = _ref.onClick,
-    resultType = _ref.resultType,
-    id = _ref.id,
-    className = _ref.className,
-    _ref$selected = _ref.selected,
-    selected = _ref$selected === void 0 ? false : _ref$selected,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? _.Size.Medium : _ref$size,
-    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var theme = (0, _styledComponents.useTheme)();
+const QuizButton = _ref => {
+  let {
+      text,
+      type,
+      onClick,
+      resultType,
+      id,
+      className,
+      selected = false,
+      disabled = false,
+      size = _.Size.Medium
+    } = _ref,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  const theme = (0, _styledComponents.useTheme)();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(OptionContainer, _objectSpread(_objectSpread({
     onClick: onClick,
     $isSelected: selected,
@@ -133,14 +77,14 @@ var QuizButton = function QuizButton(_ref) {
         disabled: disabled,
         size: size,
         tabIndexVal: -1,
-        select: function select() {},
+        select: () => {},
         id: id
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Checkbox, {
         selected: selected,
         disabled: disabled,
         size: size,
         tabIndexVal: -1,
-        select: function select() {},
+        select: () => {},
         id: id
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextContainer, {
@@ -155,14 +99,13 @@ var QuizButton = function QuizButton(_ref) {
   }));
 };
 QuizButton.propTypes = {
-  resultType: _propTypes["default"].oneOf(['correct', 'incorrect', 'partial']),
-  text: _propTypes["default"].string.isRequired,
-  onClick: _propTypes["default"].func,
-  id: _propTypes["default"].string.isRequired,
-  selected: _propTypes["default"].bool,
-  disabled: _propTypes["default"].bool,
-  type: _propTypes["default"].oneOf(['radio', 'checkbox']).isRequired
+  resultType: _propTypes.default.oneOf(['correct', 'incorrect', 'partial']),
+  text: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func,
+  id: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  type: _propTypes.default.oneOf(['radio', 'checkbox']).isRequired
 };
-var _default = QuizButton;
-exports["default"] = _default;
+var _default = exports.default = QuizButton;
 //# sourceMappingURL=QuizButton.cjs.map

package/dist/QuizButton/QuizButton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QuizButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_typography","_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","TextContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","$size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","OptionContainer","focusStyles","$isSelected","renderResultContent","resultType","jsx","SystemIcons","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","_ref$selected","selected","_ref$disabled","disabled","_ref$size","size","Medium","rest","_objectWithoutProperties2","useTheme","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","concat","role","children","RadioButton","tabIndexVal","select","Checkbox","propTypes","_propTypes","oneOf","string","isRequired","func","bool","_default","exports"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{$size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_20', props.theme)};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.$size===Size.Small?'6px 8px':(props.$size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.$size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.$size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{$size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{$size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n\r\n  width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{$isSelected:boolean, $size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n\r\n  const theme = useTheme();\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      $isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      $size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} $size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType, theme) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} $size={size}>\r\n          <TextWrapper $size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"QuizButton.cjs","names":["React","_interopRequireWildcard","require","_styledComponents","_","_typography","_jsxRuntime","_excluded","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","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","TextContainer","styled","div","_taggedTemplateLiteral2","props","COLORS","getColor","theme","$size","Size","Small","Large","ComponentSStyling","ComponentTextStyle","Regular","ComponentLStyling","ComponentMStyling","TextWrapper","ButtonContainer","OptionContainer","focusStyles","$isSelected","renderResultContent","resultType","jsx","SystemIcons","CheckMark","color","className","Close","QuizButton","_ref","text","type","onClick","id","selected","disabled","size","Medium","rest","_objectWithoutProperties2","useTheme","jsxs","tabIndex","onMouseDown","defaultOnMouseDownHandler","concat","role","children","RadioButton","tabIndexVal","select","Checkbox","propTypes","_propTypes","oneOf","string","isRequired","func","bool","_default","exports"],"sources":["../../src/QuizButton/QuizButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport styled, { useTheme } from 'styled-components';\r\nimport {Checkbox, COLORS, defaultOnMouseDownHandler, focusStyles, RadioButton, Size, SystemIcons} from '..';\r\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\r\n\r\nconst TextContainer = styled.div<{$size: Size}>`\r\n  border-radius: 0 8px 8px 0;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_20', props.theme)};\r\n  width: 100%;\r\n\r\n  transition: background 100ms ease-in-out;\r\n  align-items: center;\r\n\r\n  padding: ${props=>props.$size===Size.Small?'6px 8px':(props.$size===Size.Large?'20px 16px':'12px 16px')};\r\n  ${props=>props.$size===Size.Small ? ComponentSStyling(ComponentTextStyle.Regular,null) : (props.$size===Size.Large ? ComponentLStyling(ComponentTextStyle.Regular,null) : ComponentMStyling(ComponentTextStyle.Regular,null))}\r\n`;\r\n\r\nconst TextWrapper = styled.div<{$size:Size}>``;\r\n\r\nconst ButtonContainer = styled.div<{$size: Size}>`\r\n  border-radius: 8px 0 0 8px;\r\n  display: flex;\r\n  background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n\r\n  width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n\r\n  transition: background 100ms ease-in-out;\r\n\r\n  .quiz-button-result-icon {\r\n    height: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n    width: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  }\r\n\r\n  .radio-button-icon, .checkbox-icon {\r\n    margin: auto;\r\n    min-width: unset;\r\n    background: transparent;\r\n\r\n    svg {\r\n      color: ${props => COLORS.getColor('accent1_600', props.theme)};\r\n    }\r\n\r\n    &:hover {\r\n      background: transparent;\r\n    }\r\n\r\n    &:active {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  .small {\r\n    min-width: 32px;\r\n    min-height: 32px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 16px;\r\n        width: 16px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .medium {\r\n    min-width: 48px;\r\n    min-height: 48px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 24px;\r\n        width: 24px;\r\n      }\r\n    }\r\n  }\r\n\r\n  .large {\r\n    min-width: 64px;\r\n    min-height: 64px;\r\n    .radio-button-icon, .checkbox-icon {\r\n      svg {\r\n        height: 32px;\r\n        width: 32px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst OptionContainer = styled.div<{$isSelected:boolean, $size:Size}>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  cursor: pointer;\r\n  max-width: 65ch;  \r\n  word-break: break-word;\r\n\r\n  min-height: ${props=>props.$size===Size.Small?'32px':(props.$size===Size.Large?'64px':'48px')};\r\n  margin-bottom: ${props=>props.$size===Size.Small?'16px':(props.$size===Size.Large?'32px':'24px')};\r\n\r\n  &.selected {\r\n    ${TextContainer} {\r\n      background: ${props => COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_200', props.theme)};\r\n    }\r\n  }\r\n  \r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    \r\n    ${ButtonContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_100', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      pointer-events: none;\r\n      background: ${props => COLORS.getColor('neutral_20', props.theme)};\r\n      color: ${props => COLORS.getColor('neutral_300', props.theme)};\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &.correct {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('correct_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('correct_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.incorrect {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('critical_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('critical_500', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &.partial {\r\n    ${TextContainer} {    \r\n      background: ${props => COLORS.getColor('warning_20', props.theme)};\r\n    }\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('warning_400', props.theme)};\r\n      svg {\r\n        margin: auto;\r\n      }\r\n    }\r\n  }\r\n\r\n  &:focus,\r\n  &.focus-state {\r\n    ${focusStyles}\r\n  }\r\n\r\n  &:hover,\r\n  &.hover-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:active,\r\n  &.active-state {\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled):not(.result),\r\n  &.hover-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_300', props.theme)};\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_200', props.theme)  : COLORS.getColor('accent1_100', props.theme)};\r\n    }\r\n    \r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_700', props.theme)};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled):not(.result),\r\n  &.active-state {\r\n    ${ButtonContainer} {\r\n      background: ${props => COLORS.getColor('accent1_400', props.theme)};\r\n      transition: none;\r\n    }\r\n    ${TextContainer} {\r\n      background: ${props=>props.$isSelected ? COLORS.getColor('accent1_300', props.theme) : COLORS.getColor('accent1_200', props.theme)};\r\n      transition: none;\r\n    }\r\n\r\n    .radio-button-icon, .checkbox-icon {\r\n      background: transparent;\r\n      svg {\r\n        color: ${props => COLORS.getColor('accent1_800', props.theme)};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst renderResultContent = (resultType: string, theme: any) => {\r\n  switch(resultType){\r\n    case 'correct' : return <SystemIcons.CheckMark color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    case 'incorrect' : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n\r\n    default : return <SystemIcons.Close color={COLORS.getColor('white', theme)} className={'quiz-button-result-icon'}/>;\r\n  }\r\n};\r\n\r\nexport type QuizButtonProps = {\r\n  /**\r\n   * Optional. The result type of the quiz button. Can be 'correct', 'incorrect', or 'partial'.\r\n   */\r\n  resultType?: 'correct' | 'incorrect' | 'partial';\r\n\r\n  /**\r\n   * Required. The text to be displayed on the quiz button.\r\n   */\r\n  text: string;\r\n\r\n  /**\r\n   * Optional. A function to be called when the quiz button is clicked.\r\n   */\r\n  onClick?: (arg:any)=>void;\r\n\r\n  /**\r\n   * Required. The ID of the quiz button.\r\n   */\r\n  id: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is selected.\r\n   */\r\n  selected?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the quiz button is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. The size of the quiz button. Can be 'Small', 'Medium', or 'Large'.\r\n   */\r\n  size?: Size.Small | Size.Medium | Size.Large;\r\n\r\n  /**\r\n   * Required. The type of the quiz button. Can be 'radio' or 'checkbox'.\r\n   */\r\n  type: 'radio' | 'checkbox';\r\n} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onClick' | 'id' | 'tabIndex' | 'onMouseDown'>\r\n\r\nconst QuizButton: React.FunctionComponent<QuizButtonProps> = ({\r\n                                                                text,\r\n                                                                type,\r\n                                                                onClick,\r\n                                                                resultType,\r\n                                                                id,\r\n                                                                className,\r\n                                                                selected = false,\r\n                                                                disabled = false,\r\n                                                                size = Size.Medium,\r\n                                                                ...rest\r\n                                                              }) => {\r\n\r\n  const theme = useTheme();\r\n  return (   \r\n    <OptionContainer\r\n      onClick={onClick}\r\n      $isSelected={selected}\r\n      tabIndex={(disabled || resultType) ? -1 : 0}\r\n      onMouseDown={defaultOnMouseDownHandler}\r\n      $size={size}\r\n      className={'quiz-button '.concat(selected ? ' selected' : '')\r\n        .concat(disabled ? ' disabled' : '')\r\n        .concat(resultType ? ' result ' + resultType : '')\r\n        .concat(className ? ' ' + className : '')}\r\n      data-testid={'container'}\r\n      aria-checked={selected}\r\n      role={type === 'radio'? 'radio' : 'checkbox'}\r\n      {...rest}>\r\n        <ButtonContainer data-testid={'btnContainer'} className={'quiz-button-icon'} $size={size}>\r\n          {\r\n            resultType ? renderResultContent(resultType, theme) : (\r\n                                type==='radio' ? <RadioButton selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/> : <Checkbox selected={selected} disabled={disabled} size={size} tabIndexVal={-1}\r\n                                select={()=>{}} id={id}/>\r\n                              )\r\n          }\r\n        </ButtonContainer>\r\n\r\n        <TextContainer data-testid={'txtContainer'} className={'quiz-button-text'} $size={size}>\r\n          <TextWrapper $size={size}>\r\n            {text}\r\n          </TextWrapper>\r\n        </TextContainer>\r\n    </OptionContainer>\r\n  );\r\n};\r\n\r\nexport default QuizButton;\r\n"],"mappings":"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","ignoreList":[]}