@laerdal/life-react-components 3.5.0 → 3.5.1-dev.11

package/dist/InputFields/RadioButton.js

@@ -4,8 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _excluded = ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 import * as React from 'react';
 import styled from 'styled-components';
 import { SystemIcons } from '../icons';

package/dist/InputFields/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":["React","styled","SystemIcons","COLORS","ComponentTextStyle","focusStyles","Size","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentXXSStyling","defaultOnMouseDownHandler","StyledRadioButton","div","props","margin","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","RadioButton","forwardRef","ref","id","label","additionalLabel","select","disabled","iconPointerEventsTransparent","size","tabIndexVal","className","dataTestId","rest","onKeyPress","e","keyCode","Medium","cls","undefined"],"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: ${COLORS.black};\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.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\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      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\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: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\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: ${COLORS.white};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\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  id?: string;\r\n  selected: boolean;\r\n  select: (selected: boolean) => void;\r\n  label?: string;\r\n  additionalLabel?: string;\r\n  invalid?: boolean;\r\n  disabled?: boolean;\r\n  iconPointerEventsTransparent?: boolean;\r\n  margin?: string;\r\n  size?: Size;\r\n  tabIndexVal?: number;\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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"}
+{"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","black","selected","primary_500","invalid","critical_400","neutral_600","Regular","primary_20","primary_700","primary_100","primary_800","neutral_300","white","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: ${COLORS.black};\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.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600)};\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      ${ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 14px;\r\n    }\r\n  }\r\n\r\n  &.medium {\r\n    ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    .radio-button-label {\r\n      padding-top: 12px;\r\n    }\r\n  }\r\n\r\n  &.large {\r\n    ${ComponentLStyling(ComponentTextStyle.Regular, COLORS.black)}\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: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\r\n      }\r\n    }\r\n  }\r\n\r\n  &:not(.disabled):active {\r\n    .radio-button-icon {\r\n      background: ${COLORS.primary_100};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_800};\r\n      }\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    color: ${COLORS.neutral_300};\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: ${COLORS.white};\r\n    }\r\n\r\n    .radio-button-icon svg {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n\r\n  &.dropdown-hover:not(.disabled) {\r\n    .radio-button-icon {\r\n      background-color: ${COLORS.primary_20};\r\n\r\n      svg {\r\n        color: ${COLORS.primary_700};\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/ResponsiveComponentWrapper.cjs

@@ -5,15 +5,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var React = _interopRequireWildcard(require("react"));
 var _types = require("../types");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
 /**
  * Import React libraries.
  */
@@ -22,12 +22,14 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * Import custom styles.
  */
 
+// Add component-specific types
+
 var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   var children = _ref.children,
     size = _ref.size;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isMediumView = _React$useState2[0],
     setIsMediumView = _React$useState2[1];
   React.useEffect(function () {
@@ -51,8 +53,8 @@ var ReponsiveComponentWrapper = function ReponsiveComponentWrapper(_ref) {
   });
 };
 ReponsiveComponentWrapper.propTypes = {
-  children: _propTypes.default.any
+  children: _propTypes["default"].any
 };
 var _default = ReponsiveComponentWrapper;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=ResponsiveComponentWrapper.cjs.map

package/dist/InputFields/ResponsiveComponentWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["ReponsiveComponentWrapper","children","size","React","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;;;;;;;;;AAGA;AACA;AAKA;AAAmE;AAAA;AAAA;AATnE;AACA;AACA;;AAIA;AACA;AACA;;AASA,IAAMA,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCH,KAAK,CAACI,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIC,mBAAW,CAACC,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAON,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACC,MAAM,gBACjC,qBAAC,mBAAW;IAAA,UAAElB;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKgB,WAAI,CAACE,KAAK,gBAC7B,qBAAC,oBAAY;IAAA,UAAEnB;EAAQ,EAAgB,GACrCI,YAAY,gBACd,qBAAC,mBAAW;IAAA,UAAEJ;EAAQ,EAAe,gBAErC,qBAAC,oBAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AAAA,eA2BKD,yBAAyB;AAAA"}
+{"version":3,"file":"ResponsiveComponentWrapper.cjs","names":["React","_interopRequireWildcard","require","_types","_styles","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray2","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","BREAKPOINTS","MEDIUM","replace","matches","addEventListener","removeEventListener","Size","Medium","jsx","ComponentXS","Small","ComponentXXS","propTypes","_propTypes","any","_default","exports"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/ResponsiveComponentWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","ReponsiveComponentWrapper","children","size","useState","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8D,OAAuC;EAAA,IAAjCC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;EACtF;EACA,sBAAwCP,KAAK,CAACQ,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/DC,YAAY;IAAEC,eAAe;EAEpCV,KAAK,CAACW,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAY,GAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,WAAIb,WAAW,CAACc,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,EAAG;MAC7EP,eAAe,CAACG,GAAG,CAACK,OAAO,CAAC;IAC9B,CAAC;IACDJ,MAAM,CAACK,gBAAgB,CAAC,QAAQ,EAAEP,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACM,mBAAmB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOL,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACoB,MAAM,gBACjC,KAAC,WAAW;IAAA,UAAEf;EAAQ,EAAe,GACnCC,IAAI,IAAIA,IAAI,KAAKN,IAAI,CAACqB,KAAK,gBAC7B,KAAC,YAAY;IAAA,UAAEhB;EAAQ,EAAgB,GACrCG,YAAY,gBACd,KAAC,WAAW;IAAA,UAAEH;EAAQ,EAAe,gBAErC,KAAC,YAAY;IAAA,UAAEA;EAAQ,EACxB;AACH,CAAC;AAAC;EAzBAA,QAAQ;AAAA;AA2BV,eAAeD,yBAAyB"}
+{"version":3,"file":"ResponsiveComponentWrapper.js","names":["React","Size","BREAKPOINTS","ComponentXXS","ComponentXS","jsx","_jsx","ReponsiveComponentWrapper","_ref","children","size","_React$useState","useState","_React$useState2","_slicedToArray","isMediumView","setIsMediumView","useEffect","handleResize","mql","window","matchMedia","concat","MEDIUM","replace","matches","addEventListener","removeEventListener","Medium","Small","propTypes","_pt","any"],"sources":["../../src/InputFields/ResponsiveComponentWrapper.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  size?: Size.Small | Size.Medium;\r\n  children?: any;\r\n};\r\n\r\nconst ReponsiveComponentWrapper: React.FunctionComponent<LabelProps> = ({ children, size }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [isMediumView, setIsMediumView] = React.useState<boolean>(false);\r\n\r\n  React.useEffect(() => {\r\n    const handleResize = () => {\r\n      const mql = window.matchMedia(`${BREAKPOINTS.MEDIUM.replace('@media ', '')}`);\r\n      setIsMediumView(mql.matches);\r\n    };\r\n    window.addEventListener('resize', handleResize);\r\n    return () => window.removeEventListener('resize', handleResize);\r\n  }, []);\r\n\r\n  return size && size === Size.Medium ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : size && size === Size.Small ? (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  ) : isMediumView ? (\r\n    <ComponentXS>{children}</ComponentXS>\r\n  ) : (\r\n    <ComponentXXS>{children}</ComponentXXS>\r\n  );\r\n};\r\n\r\nexport default ReponsiveComponentWrapper;\r\n"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,IAAI,QAAQ,UAAU;;AAE/B;AACA;AACA;AACA,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,WAAW;;AAElE;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAMA,IAAMC,yBAA8D,GAAG,SAAjEA,yBAA8DA,CAAAC,IAAA,EAAuC;EAAA,IAAjCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IAAEC,IAAI,GAAAF,IAAA,CAAJE,IAAI;EACtF;EACA,IAAAC,eAAA,GAAwCX,KAAK,CAACY,QAAQ,CAAU,KAAK,CAAC;IAAAC,gBAAA,GAAAC,cAAA,CAAAH,eAAA;IAA/DI,YAAY,GAAAF,gBAAA;IAAEG,eAAe,GAAAH,gBAAA;EAEpCb,KAAK,CAACiB,SAAS,CAAC,YAAM;IACpB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAA,EAAS;MACzB,IAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,IAAAC,MAAA,CAAIpB,WAAW,CAACqB,MAAM,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAE,CAAC;MAC7ER,eAAe,CAACG,GAAG,CAACM,OAAO,CAAC;IAC9B,CAAC;IACDL,MAAM,CAACM,gBAAgB,CAAC,QAAQ,EAAER,YAAY,CAAC;IAC/C,OAAO;MAAA,OAAME,MAAM,CAACO,mBAAmB,CAAC,QAAQ,EAAET,YAAY,CAAC;IAAA;EACjE,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOR,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC2B,MAAM,gBACjCtB,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,GACnCC,IAAI,IAAIA,IAAI,KAAKT,IAAI,CAAC4B,KAAK,gBAC7BvB,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CAAC,GACrCM,YAAY,gBACdT,IAAA,CAACF,WAAW;IAAAK,QAAA,EAAEA;EAAQ,CAAc,CAAC,gBAErCH,IAAA,CAACH,YAAY;IAAAM,QAAA,EAAEA;EAAQ,CAAe,CACvC;AACH,CAAC;AAACF,yBAAA,CAAAuB,SAAA;EAzBArB,QAAQ,EAAAsB,GAAA,CAAAC;AAAA;AA2BV,eAAezB,yBAAyB","ignoreList":[]}

package/dist/InputFields/RichTextField.cjs

@@ -20,9 +20,9 @@ require("react-quill/dist/quill.snow.css");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var RichTextFieldContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
+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 RichTextFieldContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), _styles.COLORS.neutral_400, _styles.COLORS.correct_500, _styles.COLORS.critical_500, _styles.COLORS.primary_700, _styles.COLORS.primary_800, (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentSStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.black), (0, _styles.ComponentMStyling)(_styles.ComponentTextStyle.Italic, _styles.COLORS.neutral_500), _styles.COLORS.neutral_200, (0, _styles.scrollBarStyling)(_types.Size.Small), _styling.readOnlyState, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300);
 exports.RichTextFieldContainer = RichTextFieldContainer;
 var RichTextFieldFormats;
 exports.RichTextFieldFormats = RichTextFieldFormats;
@@ -56,7 +56,7 @@ var defaultToolBarOptions = [[{
 }, {
   'list': 'bullet'
 }], ['link'], ['clean']];
-var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+var RichTextField = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
   var _modules$toolbar;
   var readOnly = _ref.readOnly,
     disabled = _ref.disabled,
@@ -68,7 +68,7 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     resizable = _ref.resizable,
     modules = _ref.modules,
     formats = _ref.formats,
-    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var m = _objectSpread(_objectSpread({}, modules !== null && modules !== void 0 ? modules : {}), {}, {
     toolbar: (_modules$toolbar = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _modules$toolbar !== void 0 ? _modules$toolbar : defaultToolBarOptions
   });
@@ -77,7 +77,7 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RichTextFieldContainer, {
     className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : ''),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill.default, _objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactQuill["default"], _objectSpread({
       ref: ref,
       readOnly: readOnly || disabled,
       modules: m,
@@ -103,18 +103,18 @@ var RichTextField = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
 });
 exports.RichTextField = RichTextField;
 RichTextField.propTypes = {
-  id: _propTypes.default.string,
-  className: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  readOnly: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  resizable: _propTypes.default.bool,
-  formats: _propTypes.default.arrayOf(_propTypes.default.oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
-  onKeyDown: _propTypes.default.func,
-  onKeyPress: _propTypes.default.func,
-  onKeyUp: _propTypes.default.func,
-  value: _propTypes.default.any.isRequired,
-  onChange: _propTypes.default.func.isRequired,
-  validationMessage: _propTypes.default.string
+  id: _propTypes["default"].string,
+  className: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  readOnly: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  resizable: _propTypes["default"].bool,
+  formats: _propTypes["default"].arrayOf(_propTypes["default"].oneOf(["background", "bold", "color", "font", "code", "italic", "link", "size", "strike", "script", "underline", "blockquote", "header", "indent", "list", "align", "direction", "code-block", "formula", "image", "video"])),
+  onKeyDown: _propTypes["default"].func,
+  onKeyPress: _propTypes["default"].func,
+  onKeyUp: _propTypes["default"].func,
+  value: _propTypes["default"].any.isRequired,
+  onChange: _propTypes["default"].func.isRequired,
+  validationMessage: _propTypes["default"].string
 };
 //# sourceMappingURL=RichTextField.cjs.map

package/dist/InputFields/RichTextField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextField.cjs","names":["RichTextFieldContainer","styled","div","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","States","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  id?: string;\r\n  className?: string;\r\n  placeholder?: string;\r\n  readOnly?: boolean;\r\n  disabled?: boolean;\r\n  resizable?: boolean;\r\n\r\n  modules?: StringMap;\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onKeyDown?: React.EventHandler<any>;\r\n  onKeyPress?: React.EventHandler<any>;\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  value: any;\r\n  onChange: (value: any) => void;\r\n\r\n  validationMessage?: string;\r\n  note?: TextFieldNote;\r\n  size?: Size.Small | Size.Medium;\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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"}
+{"version":3,"file":"RichTextField.cjs","names":["_react","_interopRequireDefault","require","_reactQuill","_styledComponents","_styling","_types","_styles","_systemicons","_jsxRuntime","_excluded","_templateObject","ownKeys","e","r","t","Object","keys","getOwnPropertySymbols","o","filter","getOwnPropertyDescriptor","enumerable","push","apply","_objectSpread","arguments","length","forEach","_defineProperty2","getOwnPropertyDescriptors","defineProperties","defineProperty","RichTextFieldContainer","styled","div","_taggedTemplateLiteral2","COLORS","neutral_400","correct_500","critical_500","primary_700","primary_800","ComponentSStyling","ComponentTextStyle","Regular","black","Italic","neutral_500","ComponentMStyling","neutral_200","scrollBarStyling","Size","Small","readOnlyState","neutral_100","neutral_300","exports","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","React","forwardRef","_ref","ref","_modules$toolbar","readOnly","disabled","validationMessage","note","_ref$size","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties2","m","toolbar","f","values","a","Image","Video","Formula","jsxs","className","concat","children","jsx","theme","ValidationMessage","type","States","Invalid","Valid","CheckMark","color","correct_400","TechnicalWarning","critical_400","NoteMessage","icon","message","propTypes","id","_propTypes","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/RichTextField.js

@@ -4,8 +4,8 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLit
 import _pt from "prop-types";
 var _excluded = ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"];
 var _templateObject;
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; }
 import React from 'react';
 import ReactQuill from "react-quill";
 import styled from "styled-components";

package/dist/InputFields/RichTextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","RichTextFieldContainer","div","neutral_400","correct_500","critical_500","primary_700","primary_800","Regular","black","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","ref","readOnly","disabled","validationMessage","note","size","Medium","state","resizable","modules","formats","rest","m","toolbar","f","Object","values","filter","a","Image","Video","Formula","Invalid","Valid","correct_400","critical_400","icon","message","id","className","placeholder","onKeyDown","onKeyPress","onKeyUp","value","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  id?: string;\r\n  className?: string;\r\n  placeholder?: string;\r\n  readOnly?: boolean;\r\n  disabled?: boolean;\r\n  resizable?: boolean;\r\n\r\n  modules?: StringMap;\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  onKeyDown?: React.EventHandler<any>;\r\n  onKeyPress?: React.EventHandler<any>;\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  value: any;\r\n  onChange: (value: any) => void;\r\n\r\n  validationMessage?: string;\r\n  note?: TextFieldNote;\r\n  size?: Size.Small | Size.Medium;\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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"}
+{"version":3,"file":"RichTextField.js","names":["React","ReactQuill","styled","NoteMessage","readOnlyState","ValidationMessage","Size","States","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","scrollBarStyling","CheckMark","TechnicalWarning","jsx","_jsx","jsxs","_jsxs","RichTextFieldContainer","div","_templateObject","_taggedTemplateLiteral","neutral_400","correct_500","critical_500","primary_700","primary_800","Regular","black","Italic","neutral_500","neutral_200","Small","neutral_100","neutral_300","RichTextFieldFormats","defaultToolBarOptions","header","RichTextField","forwardRef","_ref","ref","_modules$toolbar","readOnly","disabled","validationMessage","note","_ref$size","size","Medium","state","resizable","modules","formats","rest","_objectWithoutProperties","_excluded","m","_objectSpread","toolbar","f","Object","values","filter","a","Image","Video","Formula","className","concat","children","theme","type","Invalid","Valid","color","correct_400","critical_400","icon","message","propTypes","id","_pt","string","placeholder","bool","arrayOf","oneOf","onKeyDown","func","onKeyPress","onKeyUp","value","any","isRequired","onChange"],"sources":["../../src/InputFields/RichTextField.tsx"],"sourcesContent":["import React from 'react';\r\nimport ReactQuill, {Range, UnprivilegedEditor} from \"react-quill\";\r\nimport {TextFieldNote} from \"./types\";\r\nimport styled from \"styled-components\";\r\nimport {NoteMessage, readOnlyState, ValidationMessage} from \"./styling\";\r\nimport {Size, States} from \"../types\";\r\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling} from \"../styles\";\r\nimport {CheckMark, TechnicalWarning} from \"../icons/systemicons\";\r\nimport {Sources, StringMap} from \"quill\";\r\nimport 'react-quill/dist/quill.snow.css';\r\n\r\nexport const RichTextFieldContainer = styled.div`\r\n  .quill {\r\n    width: 100%;\r\n    margin-bottom: 4px;\r\n    overflow: hidden;\r\n\r\n    box-shadow: inset 0 0 0 1px ${COLORS.neutral_400};\r\n    border-radius: 4px;\r\n  }\r\n\r\n  .quill.valid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.correct_500};\r\n  }\r\n\r\n  .quill.invalid {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.critical_500};\r\n  }\r\n\r\n  .quill:hover {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_700};\r\n  }\r\n\r\n  .quill:focus-within {\r\n    box-shadow: inset 0 0 0 2px ${COLORS.primary_800};\r\n  }\r\n\r\n  .ql-editor,\r\n  .ql-editor p{\r\n    ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n  }\r\n\r\n  .ql-editor.ql-blank::before {\r\n    ${ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.medium {\r\n    .ql-editor,\r\n    .ql-editor p{\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\r\n    }\r\n\r\n    .ql-editor.ql-blank::before {\r\n      ${ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500)}\r\n    }\r\n  }\r\n\r\n  .ql-toolbar.ql-snow {\r\n    border: none;\r\n    padding: 8px 7px;\r\n    margin: 0 1px;\r\n    border-bottom: 1px solid ${COLORS.neutral_200};\r\n  }\r\n\r\n  .quill.valid .ql-toolbar,\r\n  .quill.invalid .ql-toolbar,\r\n  .quill:hover .ql-toolbar,\r\n  .quill:focus-within .ql-toolbar {\r\n    padding: 8px 6px;\r\n    margin: 0 2px;\r\n  }\r\n\r\n  .ql-container {\r\n    font-family: unset !important;\r\n  }\r\n\r\n  .ql-container.ql-snow {\r\n    border: none;\r\n    overflow-y: hidden;\r\n    padding: 8px;\r\n  }\r\n\r\n  .ql-editor {\r\n    padding: 8px;\r\n    overflow-y: auto;\r\n\r\n    ${scrollBarStyling(Size.Small)}\r\n  }\r\n\r\n  &.resizable {\r\n    height: initial;\r\n\r\n    .quill {\r\n      flex: none;\r\n      overflow: initial;\r\n    }\r\n\r\n    .ql-container {\r\n      flex: none;\r\n      resize: vertical;\r\n    }\r\n\r\n    .ql-editor {\r\n      height: 100%;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    .quill {\r\n      ${readOnlyState}\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n\r\n    .quill {\r\n      pointer-events: none;\r\n      box-shadow: inset 0 0 0 1px ${COLORS.neutral_100};\r\n      color: ${COLORS.neutral_300};\r\n\r\n      .ql-editor.ql-blank::before {\r\n        color: ${COLORS.neutral_300};\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nexport enum RichTextFieldFormats {\r\n  Background = 'background',\r\n  Bold = 'bold',\r\n  Color = 'color',\r\n  Font = 'font',\r\n  Code = 'code',\r\n  Italic = 'italic',\r\n  Link = 'link',\r\n  Size = 'size',\r\n  Strike = 'strike',\r\n  Script = 'script',\r\n  Underline = 'underline',\r\n  Blockquote = 'blockquote',\r\n  Header = 'header',\r\n  Indent = 'indent',\r\n  List = 'list',\r\n  Align = 'align',\r\n  Direction = 'direction',\r\n  CodeBlock = 'code-block',\r\n  Formula = 'formula',\r\n  Image = 'image',\r\n  Video = 'video'\r\n}\r\n\r\nconst defaultToolBarOptions = [\r\n  [{header: [1, 2, 3, false]}],\r\n  ['bold', 'italic', 'underline', 'strike'],\r\n  [{'list': 'ordered'}, {'list': 'bullet'}],\r\n  ['link'],\r\n  ['clean']\r\n];\r\n\r\nexport interface RichTextFieldProps {\r\n  /**\r\n   * Optional. The ID of the rich text field.\r\n   */\r\n  id?: string;\r\n\r\n  /**\r\n   * Optional. The CSS class name of the rich text field.\r\n   */\r\n  className?: string;\r\n\r\n  /**\r\n   * Optional. The placeholder text to be displayed in the rich text field when it is empty.\r\n   */\r\n  placeholder?: string;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is read-only.\r\n   */\r\n  readOnly?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is disabled.\r\n   */\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * Optional. A boolean indicating whether the rich text field is resizable.\r\n   */\r\n  resizable?: boolean;\r\n\r\n  /**\r\n   * Optional. An object containing the modules to be used by the rich text field.\r\n   */\r\n  modules?: StringMap;\r\n\r\n  /**\r\n   * Optional. An array of formats to be used by the rich text field.\r\n   */\r\n  formats?: RichTextFieldFormats[];\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field gains focus.\r\n   */\r\n  onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when the rich text field loses focus.\r\n   */\r\n  onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keydown event occurs in the rich text field.\r\n   */\r\n  onKeyDown?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keypress event occurs in the rich text field.\r\n   */\r\n  onKeyPress?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Optional. A function to be called when a keyup event occurs in the rich text field.\r\n   */\r\n  onKeyUp?: React.EventHandler<any>;\r\n\r\n  /**\r\n   * Required. The current value of the rich text field.\r\n   */\r\n  value: any;\r\n\r\n  /**\r\n   * Required. A function to be called when the value of the rich text field changes.\r\n   */\r\n  onChange: (value: any) => void;\r\n\r\n  /**\r\n   * Optional. The validation message to be displayed when the rich text field is in an error state.\r\n   */\r\n  validationMessage?: string;\r\n\r\n  /**\r\n   * Optional. A note to be displayed below the rich text field.\r\n   */\r\n  note?: TextFieldNote;\r\n\r\n  /**\r\n   * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.\r\n   */\r\n  size?: Size.Small | Size.Medium;\r\n\r\n  /**\r\n   * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.\r\n   */\r\n  state?: States.Invalid | States.Valid;\r\n}\r\n\r\nexport const RichTextField = React.forwardRef<any, RichTextFieldProps>(({\r\n                                                                          readOnly,\r\n                                                                          disabled,\r\n                                                                          validationMessage,\r\n                                                                          note,\r\n                                                                          size = Size.Medium,\r\n                                                                          state,\r\n                                                                          resizable,\r\n                                                                          modules,\r\n                                                                          formats,\r\n                                                                          ...rest\r\n                                                                        }: RichTextFieldProps, ref) => {\r\n\r\n  let m = {...(modules ?? {}), toolbar: modules?.toolbar ?? defaultToolBarOptions};\r\n  let f = formats ?? Object.values(RichTextFieldFormats).filter(a => a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula);\r\n\r\n  return (\r\n    <RichTextFieldContainer\r\n      className={`${resizable ? 'resizable' : ''} ${size} ${state || ''} ${readOnly ? 'readonly' : ''}  ${disabled ? 'disabled' : ''}`}>\r\n      <ReactQuill ref={ref}\r\n                  readOnly={readOnly || disabled}\r\n                  modules={m}\r\n                  theme={'snow'}\r\n                  formats={f}\r\n                  {...rest}\r\n      />\r\n      {validationMessage && (\r\n        <ValidationMessage className={size || ''} type={state ?? States.Invalid}>\r\n          {\r\n            state === States.Valid\r\n              ? <CheckMark color={COLORS.correct_400}/>\r\n              : <TechnicalWarning color={COLORS.critical_400}/>\r\n          }\r\n          <span>{validationMessage}</span>\r\n        </ValidationMessage>\r\n      )}\r\n      {note && !disabled && (\r\n        <NoteMessage className={size}>\r\n          {note.icon}\r\n          <span>{note.message}</span>\r\n        </NoteMessage>\r\n      )}\r\n    </RichTextFieldContainer>\r\n  )\r\n});"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/SearchBar.cjs

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -20,7 +20,7 @@ var _Dropdown = require("../Dropdown");
 var _common = require("../common");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-var ClearIconWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
+var ClearIconWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
 var SearchBar = function SearchBar(_ref) {
   var id = _ref.id,
     searchTerm = _ref.searchTerm,
@@ -43,14 +43,15 @@ var SearchBar = function SearchBar(_ref) {
     searchList = _ref$searchList === void 0 ? [] : _ref$searchList,
     addToSearchList = _ref.addToSearchList,
     dropdownScrollable = _ref.dropdownScrollable;
-  var containerRef = _react.default.useRef(null);
-  var _React$useState = _react.default.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+  var containerRef = _react["default"].useRef(null);
+  var topLevelRef = _react["default"].useRef(null);
+  var _React$useState = _react["default"].useState(false),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
   var dropdownRef = (0, _common.useClickOutsideRef)(function () {
     return setIsOpen(false);
-  }, [containerRef]);
+  }, [containerRef, topLevelRef]);
   var isPressingEnter = function isPressingEnter(e) {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -71,15 +72,16 @@ var SearchBar = function SearchBar(_ref) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_styling.InputWrapper, {
       disabled: disabled,
+      ref: topLevelRef,
       margin: margin,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_SearchField["default"], {
         id: 'id',
         size: size,
         ref: containerRef,
         searchTerm: searchTerm,
         disabled: disabled,
         validationMessage: validationMessage,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput.default, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SearchBarInput["default"], {
           placeholder: disabled ? '' : placeholder,
           id: id,
           size: size,
@@ -166,26 +168,26 @@ var SearchBar = function SearchBar(_ref) {
   });
 };
 SearchBar.propTypes = {
-  id: _propTypes.default.string.isRequired,
-  searchTerm: _propTypes.default.string,
-  setSearchTerm: _propTypes.default.func.isRequired,
-  enterSearch: _propTypes.default.func.isRequired,
-  removeSearch: _propTypes.default.func.isRequired,
-  placeholder: _propTypes.default.string,
-  performSearchLabel: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  validationMessage: _propTypes.default.string,
-  onKeyDown: _propTypes.default.func,
-  margin: _propTypes.default.string,
-  showDropdown: _propTypes.default.bool,
-  dropdownButtonIcon: _propTypes.default.node,
-  dropdownButtonLabel: _propTypes.default.string,
-  dropdownButtonVariant: _propTypes.default.oneOf(['primary', 'secondary', 'tertiary']),
-  dropdownButtonAction: _propTypes.default.func,
-  searchList: _propTypes.default.array,
-  addToSearchList: _propTypes.default.func,
-  dropdownScrollable: _propTypes.default.bool
+  id: _propTypes["default"].string.isRequired,
+  searchTerm: _propTypes["default"].string,
+  setSearchTerm: _propTypes["default"].func.isRequired,
+  enterSearch: _propTypes["default"].func.isRequired,
+  removeSearch: _propTypes["default"].func.isRequired,
+  placeholder: _propTypes["default"].string,
+  performSearchLabel: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  validationMessage: _propTypes["default"].string,
+  onKeyDown: _propTypes["default"].func,
+  margin: _propTypes["default"].string,
+  showDropdown: _propTypes["default"].bool,
+  dropdownButtonIcon: _propTypes["default"].node,
+  dropdownButtonLabel: _propTypes["default"].string,
+  dropdownButtonVariant: _propTypes["default"].oneOf(['primary', 'secondary', 'tertiary']),
+  dropdownButtonAction: _propTypes["default"].func,
+  searchList: _propTypes["default"].array,
+  addToSearchList: _propTypes["default"].func,
+  dropdownScrollable: _propTypes["default"].bool
 };
 var _default = SearchBar;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=SearchBar.cjs.map