@openedx/paragon 22.11.1 → 22.12.0

package/dist/Form/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Form","FormControl","FormLabel","FormGroup","FormControlFeedback","FormText","FormControlDecoratorGroup","FormRadio","RadioControl","FormRadioSet","FormRadioSetContext","FormAutosuggest","FormAutosuggestOption","FormCheckbox","CheckboxControl","FormSwitch","SwitchControl","FormCheckboxSet","FormSwitchSet","FormCheckboxSetContext","useCheckboxSetValues","Control","Radio","RadioSet","Autosuggest","AutosuggestOption","Checkbox","CheckboxSet","Switch","SwitchSet","Label","Group","Text","default","FormCheck","FormFile","InputGroup"],"sources":["../../src/Form/index.jsx"],"sourcesContent":["import Form from 'react-bootstrap/Form';\nimport FormControl from './FormControl';\nimport FormLabel from './FormLabel';\nimport FormGroup from './FormGroup';\nimport FormControlFeedback from './FormControlFeedback';\nimport FormText from './FormText';\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\nimport FormRadio, { RadioControl } from './FormRadio';\nimport FormRadioSet from './FormRadioSet';\nimport FormRadioSetContext from './FormRadioSetContext';\nimport FormAutosuggest from './FormAutosuggest';\nimport FormAutosuggestOption from './FormAutosuggestOption';\nimport FormCheckbox, { CheckboxControl } from './FormCheckbox';\nimport FormSwitch, { SwitchControl } from './FormSwitch';\nimport FormCheckboxSet from './FormCheckboxSet';\nimport FormSwitchSet from './FormSwitchSet';\nimport FormCheckboxSetContext from './FormCheckboxSetContext';\nimport useCheckboxSetValues from './useCheckboxSetValues';\n\nForm.Control = FormControl;\nForm.Radio = FormRadio;\nForm.RadioSet = FormRadioSet;\nForm.Autosuggest = FormAutosuggest;\nForm.AutosuggestOption = FormAutosuggestOption;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxSet = FormCheckboxSet;\nForm.Switch = FormSwitch;\nForm.SwitchSet = FormSwitchSet;\nForm.Label = FormLabel;\nForm.Group = FormGroup;\nForm.Text = FormText;\n\nexport default Form;\nexport {\n  FormControl,\n  FormLabel,\n  FormRadio,\n  FormRadioSet,\n  FormRadioSetContext,\n  FormCheckbox,\n  FormSwitch,\n  FormAutosuggest,\n  FormAutosuggestOption,\n  FormCheckboxSet,\n  FormCheckboxSetContext,\n  FormGroup,\n  FormControlDecoratorGroup,\n  FormControlFeedback,\n  FormText,\n  CheckboxControl,\n  RadioControl,\n  SwitchControl,\n  FormSwitchSet,\n  useCheckboxSetValues,\n};\n\nexport { default as FormCheck } from 'react-bootstrap/FormCheck';\nexport { default as FormFile } from 'react-bootstrap/FormFile';\nexport { default as InputGroup } from 'react-bootstrap/InputGroup';\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,sBAAsB;AACvC,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,QAAQ,MAAM,YAAY;AACjC,OAAOC,yBAAyB,MAAM,6BAA6B;AACnE,OAAOC,SAAS,IAAIC,YAAY,QAAQ,aAAa;AACrD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D,OAAOC,YAAY,IAAIC,eAAe,QAAQ,gBAAgB;AAC9D,OAAOC,UAAU,IAAIC,aAAa,QAAQ,cAAc;AACxD,OAAOC,eAAe,MAAM,mBAAmB;AAC/C,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzDpB,IAAI,CAACqB,OAAO,GAAGpB,WAAW;AAC1BD,IAAI,CAACsB,KAAK,GAAGf,SAAS;AACtBP,IAAI,CAACuB,QAAQ,GAAGd,YAAY;AAC5BT,IAAI,CAACwB,WAAW,GAAGb,eAAe;AAClCX,IAAI,CAACyB,iBAAiB,GAAGb,qBAAqB;AAC9CZ,IAAI,CAAC0B,QAAQ,GAAGb,YAAY;AAC5Bb,IAAI,CAAC2B,WAAW,GAAGV,eAAe;AAClCjB,IAAI,CAAC4B,MAAM,GAAGb,UAAU;AACxBf,IAAI,CAAC6B,SAAS,GAAGX,aAAa;AAC9BlB,IAAI,CAAC8B,KAAK,GAAG5B,SAAS;AACtBF,IAAI,CAAC+B,KAAK,GAAG5B,SAAS;AACtBH,IAAI,CAACgC,IAAI,GAAG3B,QAAQ;AAEpB,eAAeL,IAAI;AACnB,SACEC,WAAW,EACXC,SAAS,EACTK,SAAS,EACTE,YAAY,EACZC,mBAAmB,EACnBG,YAAY,EACZE,UAAU,EACVJ,eAAe,EACfC,qBAAqB,EACrBK,eAAe,EACfE,sBAAsB,EACtBhB,SAAS,EACTG,yBAAyB,EACzBF,mBAAmB,EACnBC,QAAQ,EACRS,eAAe,EACfN,YAAY,EACZQ,aAAa,EACbE,aAAa,EACbE,oBAAoB;AAGtB,SAASa,OAAO,IAAIC,SAAS,QAAQ,2BAA2B;AAChE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,0BAA0B;AAC9D,SAASF,OAAO,IAAIG,UAAU,QAAQ,4BAA4B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["BootstrapForm","FormControl","FormLabel","FormGroup","FormControlFeedback","FormText","FormControlDecoratorGroup","FormRadio","RadioControl","FormRadioSet","FormRadioSetContext","FormAutosuggest","FormAutosuggestOption","FormCheckbox","CheckboxControl","FormSwitch","SwitchControl","FormCheckboxSet","FormSwitchSet","FormCheckboxSetContext","useCheckboxSetValues","Form","Control","Radio","RadioSet","Autosuggest","AutosuggestOption","Checkbox","CheckboxSet","Switch","SwitchSet","Label","Group","Text","default","FormCheck","FormFile","InputGroup"],"sources":["../../src/Form/index.tsx"],"sourcesContent":["import BootstrapForm, { FormProps } from 'react-bootstrap/Form';\nimport { ComponentWithAsProp } from '../utils/types/bootstrap';\n// TODO: add more typing and remove the @ts-ignore directives here\n// @ts-ignore\nimport FormControl from './FormControl';\nimport FormLabel from './FormLabel';\nimport FormGroup from './FormGroup';\n// @ts-ignore\nimport FormControlFeedback from './FormControlFeedback';\n// @ts-ignore\nimport FormText from './FormText';\n// @ts-ignore\nimport FormControlDecoratorGroup from './FormControlDecoratorGroup';\n// @ts-ignore\nimport FormRadio, { RadioControl } from './FormRadio';\n// @ts-ignore\nimport FormRadioSet from './FormRadioSet';\n// @ts-ignore\nimport FormRadioSetContext from './FormRadioSetContext';\n// @ts-ignore\nimport FormAutosuggest from './FormAutosuggest';\n// @ts-ignore\nimport FormAutosuggestOption from './FormAutosuggestOption';\n// @ts-ignore\nimport FormCheckbox, { CheckboxControl } from './FormCheckbox';\n// @ts-ignore\nimport FormSwitch, { SwitchControl } from './FormSwitch';\n// @ts-ignore\nimport FormCheckboxSet from './FormCheckboxSet';\n// @ts-ignore\nimport FormSwitchSet from './FormSwitchSet';\n// @ts-ignore\nimport FormCheckboxSetContext from './FormCheckboxSetContext';\n// @ts-ignore\nimport useCheckboxSetValues from './useCheckboxSetValues';\n\nconst Form = BootstrapForm as any as ComponentWithAsProp<'form', FormProps> & {\n  Control: typeof FormControl;\n  Radio: typeof FormRadio;\n  RadioSet: typeof FormRadioSet;\n  Autosuggest: typeof FormAutosuggest;\n  AutosuggestOption: typeof FormAutosuggestOption;\n  Checkbox: typeof FormCheckbox;\n  CheckboxSet: typeof FormCheckboxSet;\n  Row: typeof BootstrapForm.Row;\n  Switch: typeof FormSwitch;\n  SwitchSet: typeof FormSwitchSet;\n  Label: typeof FormLabel;\n  Group: typeof FormGroup;\n  Text: typeof FormText;\n};\nForm.Control = FormControl;\nForm.Radio = FormRadio;\nForm.RadioSet = FormRadioSet;\nForm.Autosuggest = FormAutosuggest;\nForm.AutosuggestOption = FormAutosuggestOption;\nForm.Checkbox = FormCheckbox;\nForm.CheckboxSet = FormCheckboxSet;\nForm.Switch = FormSwitch;\nForm.SwitchSet = FormSwitchSet;\nForm.Label = FormLabel;\nForm.Group = FormGroup;\nForm.Text = FormText;\n\nexport default Form;\nexport {\n  FormControl,\n  FormLabel,\n  FormRadio,\n  FormRadioSet,\n  FormRadioSetContext,\n  FormCheckbox,\n  FormSwitch,\n  FormAutosuggest,\n  FormAutosuggestOption,\n  FormCheckboxSet,\n  FormCheckboxSetContext,\n  FormGroup,\n  FormControlDecoratorGroup,\n  FormControlFeedback,\n  FormText,\n  CheckboxControl,\n  RadioControl,\n  SwitchControl,\n  FormSwitchSet,\n  useCheckboxSetValues,\n};\n\nexport { default as FormCheck } from 'react-bootstrap/FormCheck';\nexport { default as FormFile } from 'react-bootstrap/FormFile';\nexport { default as InputGroup } from 'react-bootstrap/InputGroup';\n"],"mappings":"AAAA,OAAOA,aAAa,MAAqB,sBAAsB;AAE/D;AACA;AACA,OAAOC,WAAW,MAAM,eAAe;AACvC,OAAOC,SAAS,MAAM,aAAa;AACnC,OAAOC,SAAS,MAAM,aAAa;AACnC;AACA,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD;AACA,OAAOC,QAAQ,MAAM,YAAY;AACjC;AACA,OAAOC,yBAAyB,MAAM,6BAA6B;AACnE;AACA,OAAOC,SAAS,IAAIC,YAAY,QAAQ,aAAa;AACrD;AACA,OAAOC,YAAY,MAAM,gBAAgB;AACzC;AACA,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD;AACA,OAAOC,eAAe,MAAM,mBAAmB;AAC/C;AACA,OAAOC,qBAAqB,MAAM,yBAAyB;AAC3D;AACA,OAAOC,YAAY,IAAIC,eAAe,QAAQ,gBAAgB;AAC9D;AACA,OAAOC,UAAU,IAAIC,aAAa,QAAQ,cAAc;AACxD;AACA,OAAOC,eAAe,MAAM,mBAAmB;AAC/C;AACA,OAAOC,aAAa,MAAM,iBAAiB;AAC3C;AACA,OAAOC,sBAAsB,MAAM,0BAA0B;AAC7D;AACA,OAAOC,oBAAoB,MAAM,wBAAwB;AAEzD,MAAMC,IAAI,GAAGrB,aAcZ;AACDqB,IAAI,CAACC,OAAO,GAAGrB,WAAW;AAC1BoB,IAAI,CAACE,KAAK,GAAGhB,SAAS;AACtBc,IAAI,CAACG,QAAQ,GAAGf,YAAY;AAC5BY,IAAI,CAACI,WAAW,GAAGd,eAAe;AAClCU,IAAI,CAACK,iBAAiB,GAAGd,qBAAqB;AAC9CS,IAAI,CAACM,QAAQ,GAAGd,YAAY;AAC5BQ,IAAI,CAACO,WAAW,GAAGX,eAAe;AAClCI,IAAI,CAACQ,MAAM,GAAGd,UAAU;AACxBM,IAAI,CAACS,SAAS,GAAGZ,aAAa;AAC9BG,IAAI,CAACU,KAAK,GAAG7B,SAAS;AACtBmB,IAAI,CAACW,KAAK,GAAG7B,SAAS;AACtBkB,IAAI,CAACY,IAAI,GAAG5B,QAAQ;AAEpB,eAAegB,IAAI;AACnB,SACEpB,WAAW,EACXC,SAAS,EACTK,SAAS,EACTE,YAAY,EACZC,mBAAmB,EACnBG,YAAY,EACZE,UAAU,EACVJ,eAAe,EACfC,qBAAqB,EACrBK,eAAe,EACfE,sBAAsB,EACtBhB,SAAS,EACTG,yBAAyB,EACzBF,mBAAmB,EACnBC,QAAQ,EACRS,eAAe,EACfN,YAAY,EACZQ,aAAa,EACbE,aAAa,EACbE,oBAAoB;AAGtB,SAASc,OAAO,IAAIC,SAAS,QAAQ,2BAA2B;AAChE,SAASD,OAAO,IAAIE,QAAQ,QAAQ,0BAA0B;AAC9D,SAASF,OAAO,IAAIG,UAAU,QAAQ,4BAA4B","ignoreList":[]}

package/dist/Form/messages.d.ts

@@ -0,0 +1,13 @@
+declare const messages: {
+    iconButtonOpened: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    iconButtonClosed: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default messages;

package/dist/Form/messages.js

@@ -1,16 +1,15 @@
 import { defineMessages } from 'react-intl';
-
 const messages = defineMessages({
   iconButtonOpened: {
     id: 'pgn.FormAutosuggest.iconButtonOpened',
     defaultMessage: 'Open the options menu',
-    description: 'A message shown in case when the autosuggest menu is closed.',
+    description: 'A message shown in case when the autosuggest menu is closed.'
   },
   iconButtonClosed: {
     id: 'pgn.FormAutosuggest.iconButtonClosed',
     defaultMessage: 'Close the options menu',
-    description: 'A message shown in case when the autosuggest menu is opened.',
-  },
+    description: 'A message shown in case when the autosuggest menu is opened.'
+  }
 });
-
 export default messages;
+//# sourceMappingURL=messages.js.map

package/dist/Form/messages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.js","names":["defineMessages","messages","iconButtonOpened","id","defaultMessage","description","iconButtonClosed"],"sources":["../../src/Form/messages.ts"],"sourcesContent":["import { defineMessages } from 'react-intl';\n\nconst messages = defineMessages({\n  iconButtonOpened: {\n    id: 'pgn.FormAutosuggest.iconButtonOpened',\n    defaultMessage: 'Open the options menu',\n    description: 'A message shown in case when the autosuggest menu is closed.',\n  },\n  iconButtonClosed: {\n    id: 'pgn.FormAutosuggest.iconButtonClosed',\n    defaultMessage: 'Close the options menu',\n    description: 'A message shown in case when the autosuggest menu is opened.',\n  },\n});\n\nexport default messages;\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,YAAY;AAE3C,MAAMC,QAAQ,GAAGD,cAAc,CAAC;EAC9BE,gBAAgB,EAAE;IAChBC,EAAE,EAAE,sCAAsC;IAC1CC,cAAc,EAAE,uBAAuB;IACvCC,WAAW,EAAE;EACf,CAAC;EACDC,gBAAgB,EAAE;IAChBH,EAAE,EAAE,sCAAsC;IAC1CC,cAAc,EAAE,wBAAwB;IACxCC,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,eAAeJ,QAAQ","ignoreList":[]}

package/dist/IconButton/index.js

@@ -93,7 +93,7 @@ IconButton.propTypes = {
   size: PropTypes.oneOf(['sm', 'md', 'inline']),
   /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */
   isActive: PropTypes.bool,
-  /** Used with <IconButtonToggle> */
+  /** Used with `IconButtonToggle` */
   value: PropTypes.string
 };
 /**

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","value","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** Used with `IconButtonToggle` */\n  value?: string;\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  value: undefined,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n  /** Used with <IconButtonToggle> */\n  value: PropTypes.string,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","FontAwesomeIcon","OverlayTrigger","Tooltip","IconButton","forwardRef","_ref","ref","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","invert","activeStyle","process","env","NODE_ENV","console","msg","warn","IconComponent","createElement","type","defaultProps","undefined","value","propTypes","string","elementType","isRequired","bool","shape","prefix","iconName","array","func","oneOf","IconButtonWithTooltip","_ref2","tooltipPlacement","tooltipContent","props","placement","overlay","id","node"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { type Placement } from 'react-bootstrap/Overlay';\n\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  iconAs?: typeof Icon | typeof FontAwesomeIcon,\n  /** Additional CSS class[es] to apply to this button */\n  className?: string;\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: string;\n  /** Changes icon styles for dark background */\n  invertColors?: boolean;\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  // Note: React.ComponentType is what we want here. React.ElementType would allow some element type strings like \"div\",\n  // but we only want to allow components like 'Add' (a specific icon component function/class)\n  src?: React.ComponentType;\n  /** Extra class names that will be added to the icon */\n  iconClassNames?: string;\n  /** Click handler for the button */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>;\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive?: boolean;\n  /** @deprecated Using FontAwesome icons is deprecated. Instead, pass iconAs={Icon} src={...} */\n  icon?: { prefix?: string; iconName?: string, icon?: any[] },\n  /** Type of button (uses Bootstrap options) */\n  variant?: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'light' | 'dark' | 'black' | 'brand';\n  /** size of button to render */\n  size?: 'sm' | 'md' | 'inline';\n  /** Used with `IconButtonToggle` */\n  value?: string;\n  /** no children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, Props>(({\n  className,\n  alt,\n  invertColors,\n  icon,\n  src,\n  iconClassNames,\n  onClick,\n  size,\n  variant,\n  iconAs,\n  isActive,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n}, ref) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  if (!iconAs && process.env.NODE_ENV === 'development' && console) {\n    const msg = '[Deprecated] IconButton: you have not provided a value for iconAs prop and '\n      + 'are using a default one - FontAwesomeIcon, the default value is going to be changed soon '\n      + 'as Paragon is moving away from FontAwesome, please use Paragon\\'s icons instead.';\n    // eslint-disable-next-line no-console\n    console.warn(msg);\n  }\n  const IconComponent = iconAs || FontAwesomeIcon;\n  return (\n    <button\n      aria-label={alt}\n      className={classNames(\n        'btn-icon',\n        `btn-icon-${invert}${variant}`,\n        `btn-icon-${size}`,\n        {\n          [`btn-icon-${invert}${activeStyle}active`]: isActive,\n        },\n        className,\n      )}\n      onClick={onClick}\n      type=\"button\"\n      ref={ref}\n      {...attrs}\n    >\n      <span className=\"btn-icon__icon-container\">\n        <IconComponent\n          className={classNames('btn-icon__icon', iconClassNames)}\n          icon={icon as any}\n          src={src}\n        />\n      </span>\n    </button>\n  );\n});\n\nIconButton.defaultProps = {\n  iconAs: undefined,\n  src: undefined,\n  icon: undefined,\n  iconClassNames: undefined,\n  className: undefined,\n  invertColors: false,\n  variant: 'primary',\n  size: 'md',\n  onClick: () => {},\n  isActive: false,\n  value: undefined,\n  children: undefined,\n};\n\nIconButton.propTypes = {\n  /** A custom class name. */\n  className: PropTypes.string,\n  /** Component that renders the icon, currently defaults to `FontAwesomeIcon`,\n   *  but is going to be deprecated soon, please use Paragon's icons instead. */\n  iconAs: PropTypes.elementType as any,\n  /** An icon component to render. Example import of a Paragon icon component:\n   * `import { Check } from '@openedx/paragon/icons';`\n   * */\n  src: PropTypes.elementType as any,\n  /** Alt text for your icon. For best practice, avoid using alt text to describe\n   * the image in the `IconButton`. Instead, we recommend describing the function\n   * of the button. */\n  alt: PropTypes.string.isRequired,\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n  /** Accepts a React fontawesome icon. */\n  icon: PropTypes.shape({\n    prefix: PropTypes.string,\n    iconName: PropTypes.string,\n    // eslint-disable-next-line react/forbid-prop-types\n    icon: PropTypes.array,\n  }) as any,\n  /** Extra class names that will be added to the icon */\n  iconClassNames: PropTypes.string,\n  /** Click handler for the button */\n  onClick: PropTypes.func,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** size of button to render */\n  size: PropTypes.oneOf(['sm', 'md', 'inline']),\n  /** whether to show the `IconButton` in an active state, whose styling is distinct from default state */\n  isActive: PropTypes.bool,\n  /** Used with `IconButtonToggle` */\n  value: PropTypes.string,\n};\n\ninterface PropsWithTooltip extends Props {\n  /** choose from https://popper.js.org/docs/v2/constructors/#options */\n  tooltipPlacement: Placement,\n  /** any content to pass to tooltip content area */\n  tooltipContent: React.ReactNode,\n}\n\n/**\n * An icon button wrapped in overlaytrigger to display a tooltip.\n */\nfunction IconButtonWithTooltip({\n  tooltipPlacement, tooltipContent, ...props\n}: PropsWithTooltip) {\n  const invert = props.invertColors ? 'inverse-' : '';\n  return (\n    <OverlayTrigger\n      placement={tooltipPlacement}\n      overlay={(\n        <Tooltip\n          id={`iconbutton-tooltip-${tooltipPlacement}`}\n          variant={invert ? 'light' : undefined}\n        >\n          {tooltipContent}\n        </Tooltip>\n      )}\n    >\n      <IconButton {...props} />\n    </OverlayTrigger>\n  );\n}\n\nIconButtonWithTooltip.defaultProps = {\n  ...IconButton.defaultProps,\n  tooltipPlacement: 'top',\n};\n\nIconButtonWithTooltip.propTypes = {\n  /** tooltip placement can be top, left, right etc, per https://popper.js.org/docs/v2/constructors/#options  */\n  tooltipPlacement: PropTypes.string,\n  /** any valid JSX or text to be rendered as tooltip contents */\n  tooltipContent: PropTypes.node.isRequired,\n  /** Type of button (uses Bootstrap options) */\n  variant: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'danger', 'light', 'dark', 'black', 'brand']),\n  /** Changes icon styles for dark background */\n  invertColors: PropTypes.bool,\n};\n\n(IconButton as any).IconButtonWithTooltip = IconButtonWithTooltip;\n\nexport default IconButton as typeof IconButton & {\n  IconButtonWithTooltip: typeof IconButtonWithTooltip,\n};\nexport { IconButtonWithTooltip };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,eAAe,QAAQ,gCAAgC;AAGhE,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAOC,OAAO,MAAM,YAAY;AAqChC,MAAMC,UAAU,gBAAGN,KAAK,CAACO,UAAU,CAA2B,CAAAC,IAAA,EAc3DC,GAAG,KAAK;EAAA,IAdoD;IAC7DC,SAAS;IACTC,GAAG;IACHC,YAAY;IACZC,IAAI;IACJC,GAAG;IACHC,cAAc;IACdC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,MAAM;IACNC,QAAQ;IACRC,QAAQ;IAAE;IACV,GAAGC;EACL,CAAC,GAAAd,IAAA;EACC,MAAMe,MAAM,GAAGX,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,MAAMY,WAAW,GAAGJ,QAAQ,GAAI,GAAEF,OAAQ,GAAE,GAAG,EAAE;EACjD,IAAI,CAACC,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,aAAa,IAAIC,OAAO,EAAE;IAChE,MAAMC,GAAG,GAAG,6EAA6E,GACrF,2FAA2F,GAC3F,kFAAkF;IACtF;IACAD,OAAO,CAACE,IAAI,CAACD,GAAG,CAAC;EACnB;EACA,MAAME,aAAa,GAAGZ,MAAM,IAAIhB,eAAe;EAC/C,oBACEH,KAAA,CAAAgC,aAAA;IACE,cAAYrB,GAAI;IAChBD,SAAS,EAAER,UAAU,CACnB,UAAU,EACT,YAAWqB,MAAO,GAAEL,OAAQ,EAAC,EAC7B,YAAWD,IAAK,EAAC,EAClB;MACE,CAAE,YAAWM,MAAO,GAAEC,WAAY,QAAO,GAAGJ;IAC9C,CAAC,EACDV,SACF,CAAE;IACFM,OAAO,EAAEA,OAAQ;IACjBiB,IAAI,EAAC,QAAQ;IACbxB,GAAG,EAAEA,GAAI;IAAA,GACLa;EAAK,gBAETtB,KAAA,CAAAgC,aAAA;IAAMtB,SAAS,EAAC;EAA0B,gBACxCV,KAAA,CAAAgC,aAAA,CAACD,aAAa;IACZrB,SAAS,EAAER,UAAU,CAAC,gBAAgB,EAAEa,cAAc,CAAE;IACxDF,IAAI,EAAEA,IAAY;IAClBC,GAAG,EAAEA;EAAI,CACV,CACG,CACA,CAAC;AAEb,CAAC,CAAC;AAEFR,UAAU,CAAC4B,YAAY,GAAG;EACxBf,MAAM,EAAEgB,SAAS;EACjBrB,GAAG,EAAEqB,SAAS;EACdtB,IAAI,EAAEsB,SAAS;EACfpB,cAAc,EAAEoB,SAAS;EACzBzB,SAAS,EAAEyB,SAAS;EACpBvB,YAAY,EAAE,KAAK;EACnBM,OAAO,EAAE,SAAS;EAClBD,IAAI,EAAE,IAAI;EACVD,OAAO,EAAEA,CAAA,KAAM,CAAC,CAAC;EACjBI,QAAQ,EAAE,KAAK;EACfgB,KAAK,EAAED,SAAS;EAChBd,QAAQ,EAAEc;AACZ,CAAC;AAED7B,UAAU,CAAC+B,SAAS,GAAG;EACrB;EACA3B,SAAS,EAAET,SAAS,CAACqC,MAAM;EAC3B;AACF;EACEnB,MAAM,EAAElB,SAAS,CAACsC,WAAkB;EACpC;AACF;AACA;EACEzB,GAAG,EAAEb,SAAS,CAACsC,WAAkB;EACjC;AACF;AACA;EACE5B,GAAG,EAAEV,SAAS,CAACqC,MAAM,CAACE,UAAU;EAChC;EACA5B,YAAY,EAAEX,SAAS,CAACwC,IAAI;EAC5B;EACA5B,IAAI,EAAEZ,SAAS,CAACyC,KAAK,CAAC;IACpBC,MAAM,EAAE1C,SAAS,CAACqC,MAAM;IACxBM,QAAQ,EAAE3C,SAAS,CAACqC,MAAM;IAC1B;IACAzB,IAAI,EAAEZ,SAAS,CAAC4C;EAClB,CAAC,CAAQ;EACT;EACA9B,cAAc,EAAEd,SAAS,CAACqC,MAAM;EAChC;EACAtB,OAAO,EAAEf,SAAS,CAAC6C,IAAI;EACvB;EACA5B,OAAO,EAAEjB,SAAS,CAAC8C,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACA9B,IAAI,EAAEhB,SAAS,CAAC8C,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;EAC7C;EACA3B,QAAQ,EAAEnB,SAAS,CAACwC,IAAI;EACxB;EACAL,KAAK,EAAEnC,SAAS,CAACqC;AACnB,CAAC;AASD;AACA;AACA;AACA,SAASU,qBAAqBA,CAAAC,KAAA,EAET;EAAA,IAFU;IAC7BC,gBAAgB;IAAEC,cAAc;IAAE,GAAGC;EACrB,CAAC,GAAAH,KAAA;EACjB,MAAM1B,MAAM,GAAG6B,KAAK,CAACxC,YAAY,GAAG,UAAU,GAAG,EAAE;EACnD,oBACEZ,KAAA,CAAAgC,aAAA,CAAC5B,cAAc;IACbiD,SAAS,EAAEH,gBAAiB;IAC5BI,OAAO,eACLtD,KAAA,CAAAgC,aAAA,CAAC3B,OAAO;MACNkD,EAAE,EAAG,sBAAqBL,gBAAiB,EAAE;MAC7ChC,OAAO,EAAEK,MAAM,GAAG,OAAO,GAAGY;IAAU,GAErCgB,cACM;EACT,gBAEFnD,KAAA,CAAAgC,aAAA,CAAC1B,UAAU;IAAA,GAAK8C;EAAK,CAAG,CACV,CAAC;AAErB;AAEAJ,qBAAqB,CAACd,YAAY,GAAG;EACnC,GAAG5B,UAAU,CAAC4B,YAAY;EAC1BgB,gBAAgB,EAAE;AACpB,CAAC;AAEDF,qBAAqB,CAACX,SAAS,GAAG;EAChC;EACAa,gBAAgB,EAAEjD,SAAS,CAACqC,MAAM;EAClC;EACAa,cAAc,EAAElD,SAAS,CAACuD,IAAI,CAAChB,UAAU;EACzC;EACAtB,OAAO,EAAEjB,SAAS,CAAC8C,KAAK,CAAC,CAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;EACrH;EACAnC,YAAY,EAAEX,SAAS,CAACwC;AAC1B,CAAC;AAEAnC,UAAU,CAAS0C,qBAAqB,GAAGA,qBAAqB;AAEjE,eAAe1C,UAAU;AAGzB,SAAS0C,qBAAqB","ignoreList":[]}

package/dist/index.d.ts

@@ -9,6 +9,28 @@ export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as Container, ContainerSize } from './Container';
+export {
+  default as Form,
+  RadioControl,
+  CheckboxControl,
+  SwitchControl,
+  FormSwitchSet,
+  FormControl,
+  FormControlDecoratorGroup,
+  FormControlFeedback,
+  FormCheck,
+  FormFile,
+  FormRadio,
+  FormRadioSet,
+  FormRadioSetContext,
+  FormGroup,
+  FormLabel,
+  useCheckboxSetValues,
+  FormText,
+  FormAutosuggest,
+  FormAutosuggestOption,
+  InputGroup,
+} from './Form';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
@@ -61,28 +83,6 @@ export const
 export const Fade: any; // from './Fade';
 /** @deprecated */
 export const Fieldset: any; // from './Fieldset';
-export const
-  Form: any,
-  RadioControl: any,
-  CheckboxControl: any,
-  SwitchControl: any,
-  FormSwitchSet: any,
-  FormControl: any,
-  FormControlDecoratorGroup: any,
-  FormControlFeedback: any,
-  FormCheck: any,
-  FormFile: any,
-  FormRadio: any,
-  FormRadioSet: any,
-  FormRadioSetContext: any,
-  FormGroup: any,
-  FormLabel: any,
-  useCheckboxSetValues: any,
-  FormText: any,
-  FormAutosuggest: any,
-  FormAutosuggestOption: any,
-  InputGroup: any;
-// from './Form';
 export const IconButtonToggle: any; // from './IconButtonToggle';
 /** @deprecated Replaced by `Form.Control`. */
 export const Input: any; // from './Input';

package/dist/index.js

@@ -9,6 +9,28 @@ export { default as Button, ButtonGroup, ButtonToolbar } from './Button';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as Container } from './Container';
+export {
+  default as Form,
+  RadioControl,
+  CheckboxControl,
+  SwitchControl,
+  FormSwitchSet,
+  FormControl,
+  FormControlDecoratorGroup,
+  FormControlFeedback,
+  FormCheck,
+  FormFile,
+  FormRadio,
+  FormRadioSet,
+  FormRadioSetContext,
+  FormGroup,
+  FormLabel,
+  useCheckboxSetValues,
+  FormText,
+  FormAutosuggest,
+  FormAutosuggestOption,
+  InputGroup,
+} from './Form';
 export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXTERNAL_LINK_TITLE } from './Hyperlink';
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
@@ -61,28 +83,6 @@ export {
 export { default as Fade } from './Fade';
 /** @deprecated */
 export { default as Fieldset } from './Fieldset';
-export {
-  default as Form,
-  RadioControl,
-  CheckboxControl,
-  SwitchControl,
-  FormSwitchSet,
-  FormControl,
-  FormControlDecoratorGroup,
-  FormControlFeedback,
-  FormCheck,
-  FormFile,
-  FormRadio,
-  FormRadioSet,
-  FormRadioSetContext,
-  FormGroup,
-  FormLabel,
-  useCheckboxSetValues,
-  FormText,
-  FormAutosuggest,
-  FormAutosuggestOption,
-  InputGroup,
-} from './Form';
 export { default as IconButtonToggle } from './IconButtonToggle';
 /** @deprecated Replaced by `Form.Control`. */
 export { default as Input } from './Input';

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { default as newId } from './newId';

package/dist/utils/index.js

@@ -1,2 +1,3 @@
 // eslint-disable-next-line import/prefer-default-export
 export { default as newId } from './newId';
+//# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","newId"],"sources":["../../src/utils/index.ts"],"sourcesContent":["// eslint-disable-next-line import/prefer-default-export\nexport { default as newId } from './newId';\n"],"mappings":"AAAA;AACA,SAASA,OAAO,IAAIC,KAAK,QAAQ,SAAS","ignoreList":[]}

package/dist/utils/newId.d.ts

@@ -0,0 +1,2 @@
+declare const newId: (prefix?: string) => string;
+export default newId;

package/dist/utils/newId.js

@@ -1,8 +1,8 @@
 let lastId = 0;
-
-const newId = (prefix = 'id') => {
+const newId = function () {
+  let prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'id';
   lastId += 1;
   return `${prefix}${lastId}`;
 };
-
 export default newId;
+//# sourceMappingURL=newId.js.map

package/dist/utils/newId.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"newId.js","names":["lastId","newId","prefix","arguments","length","undefined"],"sources":["../../src/utils/newId.ts"],"sourcesContent":["let lastId = 0;\n\nconst newId = (prefix = 'id') => {\n  lastId += 1;\n  return `${prefix}${lastId}`;\n};\n\nexport default newId;\n"],"mappings":"AAAA,IAAIA,MAAM,GAAG,CAAC;AAEd,MAAMC,KAAK,GAAG,SAAAA,CAAA,EAAmB;EAAA,IAAlBC,MAAM,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,IAAI;EAC1BH,MAAM,IAAI,CAAC;EACX,OAAQ,GAAEE,MAAO,GAAEF,MAAO,EAAC;AAC7B,CAAC;AAED,eAAeC,KAAK","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "22.11.1",
+  "version": "22.12.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Card/CardFallbackDefaultImage.js

@@ -0,0 +1 @@
+export const cardSrcFallbackImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXwAAACMCAYAAAB/AhJnAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAH6SURBVHgB7dRBEYBADACxwuDf5j0QUXywiYhc7zk7APzd3gNAgvABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIoQPECF8gAjhA0QIHyBC+AARwgeIED5AhPABIp4BaNpp2Q/3/wfPkGyXOQAAAABJRU5ErkJggg==';

package/src/Card/CardImageCap.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Skeleton from 'react-loading-skeleton';
 import CardContext from './CardContext';
-import cardSrcFallbackImg from './fallback-default.png';
+import { cardSrcFallbackImg } from './CardFallbackDefaultImage';
 
 const SKELETON_HEIGHT_VALUE = 140;
 const LOGO_SKELETON_HEIGHT_VALUE = 41;

package/src/Card/tests/CardImageCap.test.jsx

@@ -3,6 +3,7 @@ import renderer from 'react-test-renderer';
 import { render, fireEvent, screen } from '@testing-library/react';
 import CardImageCap from '../CardImageCap';
 import CardContext from '../CardContext';
+import { cardSrcFallbackImg } from '../CardFallbackDefaultImage';
 
 // eslint-disable-next-line react/prop-types
 function CardImageCapWrapper({ orientation = 'vertical', isLoading, ...props }) {
@@ -119,13 +120,12 @@ describe('<CardImageCap />', () => {
     expect(logoImg.className).toEqual('pgn__card-logo-cap');
   });
 
-  it('hiding component if it isn`t fallbackSrc and src don`t work', () => {
+  it('renders the default image if both src and fallbackSrc fail to load', () => {
     render(<CardImageCapWrapper src="fakeURL" fallbackSrc="fakeURL" srcAlt="Src alt text" />);
 
     const srcImg = screen.getByAltText('Src alt text');
     fireEvent.load(srcImg);
     fireEvent.error(srcImg);
-    // test-file-stub is what our fileMock.js returns for all images
-    expect(srcImg.src.endsWith('test-file-stub')).toEqual(true);
+    expect(srcImg.src).toEqual(cardSrcFallbackImg);
   });
 });

package/src/Form/{FormGroup.jsx → FormGroup.tsx}

@@ -2,18 +2,37 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { FormGroupContextProvider } from './FormGroupContext';
+import { FORM_CONTROL_SIZES } from './constants';
 
-function FormGroup({
+interface Props<As extends React.ElementType> {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies class name to append to the base element. */
+  className?: string;
+  /** Specifies base element for the component. */
+  as?: As;
+  /** Specifies id to use in the group, it will be used as `htmlFor` in `FormLabel` and as `id` in input components.
+   *  Will be autogenerated if none is supplied. */
+  controlId?: string;
+  /** Specifies whether to display components in invalid state, this affects styling. */
+  isInvalid?: boolean;
+  /** Specifies whether to display components in valid state, this affects styling. */
+  isValid?: boolean;
+  /** Specifies size for the component. */
+  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
+}
+
+function FormGroup<As extends React.ElementType = 'div'>({
   children,
   controlId,
-  isInvalid,
-  isValid,
+  isInvalid = false,
+  isValid = false,
   size,
   as,
   ...props
-}) {
+}: Props<As> & React.ComponentPropsWithoutRef<As>) {
   return React.createElement(
-    as,
+    as ?? 'div',
     {
       ...props,
       className: classNames('pgn__form-group', props.className),
@@ -50,13 +69,4 @@ FormGroup.propTypes = {
   size: PropTypes.oneOf(SIZE_CHOICES),
 };
 
-FormGroup.defaultProps = {
-  as: 'div',
-  className: undefined,
-  controlId: undefined,
-  isInvalid: false,
-  isValid: false,
-  size: undefined,
-};
-
 export default FormGroup;

package/src/Form/{FormGroupContext.jsx → FormGroupContext.tsx}

@@ -1,16 +1,28 @@
 import React, {
   useState, useEffect, useMemo, useCallback,
 } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { newId } from '../utils';
 import { useIdList, omitUndefinedProperties } from './fieldUtils';
 import { FORM_CONTROL_SIZES } from './constants';
 
-const identityFn = props => props;
+const identityFn = (props: Record<string, any>) => props;
 const noop = () => {};
 
-const FormGroupContext = React.createContext({
+interface FormGroupContextData {
+  getControlProps: (props: Record<string, any>) => Record<string, any>;
+  getLabelProps: (props: React.ComponentPropsWithoutRef<'label'>) => React.ComponentPropsWithoutRef<'label'>;
+  getDescriptorProps: (props: Record<string, any>) => Record<string, any>;
+  useSetIsControlGroupEffect: (isControlGroup: boolean) => void;
+  isControlGroup?: boolean;
+  controlId?: string;
+  isInvalid?: boolean;
+  isValid?: boolean;
+  size?: string;
+  hasFormGroupProvider?: boolean;
+}
+
+const FormGroupContext = React.createContext<FormGroupContextData>({
   getControlProps: identityFn,
   useSetIsControlGroupEffect: noop,
   getLabelProps: identityFn,
@@ -20,13 +32,15 @@ const FormGroupContext = React.createContext({
 
 const useFormGroupContext = () => React.useContext(FormGroupContext);
 
-const useStateEffect = (initialState) => {
+function useStateEffect<ValueType extends any>(
+  initialState: ValueType,
+): [value: ValueType, setter: (v: ValueType) => void] {
   const [state, setState] = useState(initialState);
-  const useSetStateEffect = (newState) => {
+  const useSetStateEffect = (newState: ValueType) => {
     useEffect(() => setState(newState), [newState]);
   };
   return [state, useSetStateEffect];
-};
+}
 
 function FormGroupContextProvider({
   children,
@@ -34,6 +48,12 @@ function FormGroupContextProvider({
   isInvalid,
   isValid,
   size,
+}: {
+  children: React.ReactNode;
+  controlId?: string;
+  isInvalid?: boolean;
+  isValid?: boolean;
+  size?: typeof FORM_CONTROL_SIZES.SMALL | typeof FORM_CONTROL_SIZES.LARGE;
 }) {
   const controlId = useMemo(() => explicitControlId || newId('form-field'), [explicitControlId]);
   const [describedByIds, registerDescriptorId] = useIdList(controlId);
@@ -62,7 +82,7 @@ function FormGroupContextProvider({
     controlId,
   ]);
 
-  const getLabelProps = (labelProps) => {
+  const getLabelProps = (labelProps: React.ComponentPropsWithoutRef<'label'>) => {
     const id = registerLabelerId(labelProps?.id);
     if (isControlGroup) {
       return { ...labelProps, id };
@@ -70,12 +90,12 @@ function FormGroupContextProvider({
     return { ...labelProps, htmlFor: controlId };
   };
 
-  const getDescriptorProps = (descriptorProps) => {
+  const getDescriptorProps = (descriptorProps: Record<string, any>) => {
     const id = registerDescriptorId(descriptorProps?.id);
     return { ...descriptorProps, id };
   };
 
-  const contextValue = {
+  const contextValue: FormGroupContextData = {
     getControlProps,
     getLabelProps,
     getDescriptorProps,
@@ -95,24 +115,6 @@ function FormGroupContextProvider({
   );
 }
 
-FormGroupContextProvider.propTypes = {
-  children: PropTypes.node.isRequired,
-  controlId: PropTypes.string,
-  isInvalid: PropTypes.bool,
-  isValid: PropTypes.bool,
-  size: PropTypes.oneOf([
-    FORM_CONTROL_SIZES.SMALL,
-    FORM_CONTROL_SIZES.LARGE,
-  ]),
-};
-
-FormGroupContextProvider.defaultProps = {
-  controlId: undefined,
-  isInvalid: undefined,
-  isValid: undefined,
-  size: undefined,
-};
-
 export {
   FormGroupContext,
   FormGroupContextProvider,

package/src/Form/{FormLabel.jsx → FormLabel.tsx}

@@ -4,7 +4,14 @@ import classNames from 'classnames';
 import { useFormGroupContext } from './FormGroupContext';
 import { FORM_CONTROL_SIZES } from './constants';
 
-function FormLabel({ children, isInline, ...props }) {
+interface Props {
+  /** Specifies contents of the component. */
+  children: React.ReactNode;
+  /** Specifies whether the component should be displayed with inline styling. */
+  isInline?: boolean;
+}
+
+function FormLabel({ children, isInline = false, ...props }: Props & React.ComponentPropsWithoutRef<'label'>) {
   const { size, isControlGroup, getLabelProps } = useFormGroupContext();
   const className = classNames(
     'pgn__form-label',
@@ -20,8 +27,6 @@ function FormLabel({ children, isInline, ...props }) {
   return React.createElement(componentType, labelProps, children);
 }
 
-const SIZE_CHOICES = ['sm', 'lg'];
-
 FormLabel.propTypes = {
   /** Specifies class name to append to the base element. */
   className: PropTypes.string,
@@ -29,14 +34,6 @@ FormLabel.propTypes = {
   children: PropTypes.node.isRequired,
   /** Specifies whether the component should be displayed with inline styling. */
   isInline: PropTypes.bool,
-  /** Specifies size of the component. */
-  size: PropTypes.oneOf(SIZE_CHOICES),
-};
-
-FormLabel.defaultProps = {
-  isInline: false,
-  size: undefined,
-  className: undefined,
 };
 
 export default FormLabel;

package/src/Form/{constants.js → constants.ts}

@@ -1,10 +1,9 @@
-/* eslint-disable import/prefer-default-export */
-const FORM_CONTROL_SIZES = {
+export const FORM_CONTROL_SIZES = {
   SMALL: 'sm',
   LARGE: 'lg',
-};
+} as const;
 
-const FORM_TEXT_TYPES = {
+export const FORM_TEXT_TYPES = {
   DEFAULT: 'default',
   VALID: 'valid',
   INVALID: 'invalid',
@@ -12,6 +11,4 @@ const FORM_TEXT_TYPES = {
   CRITERIA_EMPTY: 'criteria-empty',
   CRITERIA_VALID: 'criteria-valid',
   CRITERIA_INVALID: 'criteria-invalid',
-};
-
-export { FORM_CONTROL_SIZES, FORM_TEXT_TYPES };
+} as const;

package/src/Form/{fieldUtils.js → fieldUtils.ts}

@@ -8,10 +8,10 @@ const omitUndefinedProperties = (obj = {}) => Object.entries(obj)
       acc[key] = value;
     }
     return acc;
-  }, {});
+  }, {} as Record<string, any>);
 
-const callAllHandlers = (...handlers) => {
-  const unifiedEventHandler = (event) => {
+const callAllHandlers = <EventType extends Object>(...handlers: ((event: EventType) => void)[]) => {
+  const unifiedEventHandler = (event: EventType) => {
     handlers
       .filter(handler => typeof handler === 'function')
       .forEach(handler => handler(event));
@@ -19,16 +19,19 @@ const callAllHandlers = (...handlers) => {
   return unifiedEventHandler;
 };
 
-const useHasValue = ({ defaultValue, value }) => {
+const useHasValue = <ValueType>({ defaultValue, value }: { defaultValue?: ValueType, value?: ValueType }) => {
   const [hasUncontrolledValue, setHasUncontrolledValue] = useState(!!defaultValue || defaultValue === 0);
   const hasValue = !!value || value === 0 || hasUncontrolledValue;
-  const handleInputEvent = (e) => setHasUncontrolledValue(e.target.value);
+  const handleInputEvent = (e: React.ChangeEvent<HTMLInputElement>) => setHasUncontrolledValue(!!e.target.value);
   return [hasValue, handleInputEvent];
 };
 
-const useIdList = (uniqueIdPrefix, initialList) => {
+const useIdList = (
+  uniqueIdPrefix: string,
+  initialList?: string[],
+): [idList: string[], useRegisteredId: (id: string | undefined) => string | undefined] => {
   const [idList, setIdList] = useState(initialList || []);
-  const addId = (idToAdd) => {
+  const addId = (idToAdd: string) => {
     setIdList(oldIdList => [...oldIdList, idToAdd]);
     return idToAdd;
   };
@@ -36,17 +39,17 @@ const useIdList = (uniqueIdPrefix, initialList) => {
     const idToAdd = newId(`${uniqueIdPrefix}-`);
     return addId(idToAdd);
   };
-  const removeId = (idToRemove) => {
+  const removeId = (idToRemove: string | undefined) => {
     setIdList(oldIdList => oldIdList.filter(id => id !== idToRemove));
   };
 
-  const useRegisteredId = (explicitlyRegisteredId) => {
+  const useRegisteredId = (explicitlyRegisteredId: string | undefined) => {
     const [registeredId, setRegisteredId] = useState(explicitlyRegisteredId);
     useEffect(() => {
       if (explicitlyRegisteredId) {
         addId(explicitlyRegisteredId);
       } else if (!registeredId) {
-        setRegisteredId(getNewId(uniqueIdPrefix));
+        setRegisteredId(getNewId());
       }
       return () => removeId(registeredId);
     }, [registeredId, explicitlyRegisteredId]);
@@ -56,7 +59,7 @@ const useIdList = (uniqueIdPrefix, initialList) => {
   return [idList, useRegisteredId];
 };
 
-const mergeAttributeValues = (...values) => {
+const mergeAttributeValues = (...values: (string | undefined)[]) => {
   const mergedValues = classNames(values);
   return mergedValues || undefined;
 };