@openedx/paragon 23.18.0 → 23.18.2

package/dist/Badge/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ComponentWithAsProp } from '../utils/types/bootstrap';
+declare const STYLE_VARIANTS: string[];
+interface BadgeProps {
+    /** Specifies element type for this component */
+    as?: React.ElementType;
+    /** Visual style of the badge. The full type definition can be seen [here](https://github.com/openedx/paragon/blob/release-23.x/src/Badge/index.tsx) */
+    variant?: typeof STYLE_VARIANTS[number];
+    /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */
+    pill?: boolean;
+    /** Overrides underlying component base CSS class name */
+    bsPrefix?: string;
+}
+declare const Badge: ComponentWithAsProp<'span', BadgeProps>;
+export default Badge;

package/dist/Badge/index.js

@@ -1,26 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import BaseBadge from 'react-bootstrap/Badge';
-const Badge = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(BaseBadge, {
+const STYLE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+const Badge = /*#__PURE__*/React.forwardRef(({
+  as = 'span',
+  variant = 'primary',
+  pill = false,
+  bsPrefix = 'badge',
+  ...props
+}, ref) => /*#__PURE__*/React.createElement(BaseBadge, {
+  as: as,
+  variant: variant,
+  pill: pill,
+  bsPrefix: bsPrefix,
   ...props,
   ref: ref
 }));
-const STYLE_VARIANTS = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
-Badge.propTypes = {
-  /** Specifies element type for this component */
-  as: PropTypes.elementType,
-  /** Visual style of the badge */
-  variant: PropTypes.oneOf(STYLE_VARIANTS),
-  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */
-  pill: PropTypes.bool,
-  /** Overrides underlying component base CSS class name */
-  bsPrefix: PropTypes.string
-};
-Badge.defaultProps = {
-  as: 'span',
-  variant: 'primary',
-  pill: false,
-  bsPrefix: 'badge'
-};
 export default Badge;
 //# sourceMappingURL=index.js.map

package/dist/Badge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","BaseBadge","Badge","forwardRef","props","ref","createElement","STYLE_VARIANTS","propTypes","as","elementType","variant","oneOf","pill","bool","bsPrefix","string","defaultProps"],"sources":["../../src/Badge/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport BaseBadge from 'react-bootstrap/Badge';\n\nconst Badge = React.forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);\n\nconst STYLE_VARIANTS = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n  'light',\n  'dark',\n];\n\nBadge.propTypes = {\n  /** Specifies element type for this component */\n  as: PropTypes.elementType,\n  /** Visual style of the badge */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */\n  pill: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nBadge.defaultProps = {\n  as: 'span',\n  variant: 'primary',\n  pill: false,\n  bsPrefix: 'badge',\n};\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,SAAS,MAAM,uBAAuB;AAE7C,MAAMC,KAAK,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,kBAAKN,KAAA,CAAAO,aAAA,CAACL,SAAS;EAAA,GAAKG,KAAK;EAAEC,GAAG,EAAEA;AAAI,CAAE,CAAC,CAAC;AAElF,MAAME,cAAc,GAAG,CACrB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,CACP;AAEDL,KAAK,CAACM,SAAS,GAAG;EAChB;EACAC,EAAE,EAAET,SAAS,CAACU,WAAW;EACzB;EACAC,OAAO,EAAEX,SAAS,CAACY,KAAK,CAACL,cAAc,CAAC;EACxC;EACAM,IAAI,EAAEb,SAAS,CAACc,IAAI;EACpB;EACAC,QAAQ,EAAEf,SAAS,CAACgB;AACtB,CAAC;AAEDd,KAAK,CAACe,YAAY,GAAG;EACnBR,EAAE,EAAE,MAAM;EACVE,OAAO,EAAE,SAAS;EAClBE,IAAI,EAAE,KAAK;EACXE,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeb,KAAK","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","BaseBadge","STYLE_VARIANTS","Badge","forwardRef","as","variant","pill","bsPrefix","props","ref","createElement"],"sources":["../../src/Badge/index.tsx"],"sourcesContent":["import React, { ForwardedRef } from 'react';\nimport BaseBadge from 'react-bootstrap/Badge';\nimport { ComponentWithAsProp } from '../utils/types/bootstrap';\n\nconst STYLE_VARIANTS = [\n  'primary',\n  'secondary',\n  'success',\n  'danger',\n  'warning',\n  'info',\n  'light',\n  'dark',\n];\n\ninterface BadgeProps {\n  /** Specifies element type for this component */\n  as?: React.ElementType;\n  /** Visual style of the badge. The full type definition can be seen [here](https://github.com/openedx/paragon/blob/release-23.x/src/Badge/index.tsx) */\n  variant?: typeof STYLE_VARIANTS[number];\n  /** Add the `pill` modifier to make badges more rounded with some additional horizontal padding */\n  pill?: boolean;\n  /** Overrides underlying component base CSS class name */\n  bsPrefix?: string;\n}\n\nconst Badge: ComponentWithAsProp<'span', BadgeProps> = React.forwardRef(({\n  as = 'span', variant = 'primary', pill = false, bsPrefix = 'badge', ...props\n}: BadgeProps, ref: ForwardedRef<HTMLSpanElement>) => (\n  <BaseBadge as={as} variant={variant} pill={pill} bsPrefix={bsPrefix} {...props} ref={ref} />\n));\n\nexport default Badge;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAwB,OAAO;AAC3C,OAAOC,SAAS,MAAM,uBAAuB;AAG7C,MAAMC,cAAc,GAAG,CACrB,SAAS,EACT,WAAW,EACX,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,CACP;AAaD,MAAMC,KAA8C,gBAAGH,KAAK,CAACI,UAAU,CAAC,CAAC;EACvEC,EAAE,GAAG,MAAM;EAAEC,OAAO,GAAG,SAAS;EAAEC,IAAI,GAAG,KAAK;EAAEC,QAAQ,GAAG,OAAO;EAAE,GAAGC;AAC7D,CAAC,EAAEC,GAAkC,kBAC/CV,KAAA,CAAAW,aAAA,CAACV,SAAS;EAACI,EAAE,EAAEA,EAAG;EAACC,OAAO,EAAEA,OAAQ;EAACC,IAAI,EAAEA,IAAK;EAACC,QAAQ,EAAEA,QAAS;EAAA,GAAKC,KAAK;EAAEC,GAAG,EAAEA;AAAI,CAAE,CAC5F,CAAC;AAEF,eAAeP,KAAK","ignoreList":[]}

package/dist/Breadcrumb/BreadcrumbLink.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface BreadcrumbLinkProps {
+    as: React.ElementType;
+    clickHandler?: (event: React.MouseEvent, link: any) => void;
+    linkProps: {
+        label: string;
+        url?: string;
+        className?: string;
+        [key: string]: any;
+    };
+}
+export default function BreadcrumbLink({ as, clickHandler, linkProps }: BreadcrumbLinkProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+export {};

package/dist/Breadcrumb/BreadcrumbLink.js

@@ -1,9 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 export default function BreadcrumbLink({
   as,
-  clickHandler,
+  clickHandler = undefined,
   linkProps
 }) {
   const {
@@ -27,16 +26,4 @@ export default function BreadcrumbLink({
     className: classNames('link-muted', className)
   }, label);
 }
-BreadcrumbLink.propTypes = {
-  as: PropTypes.elementType.isRequired,
-  clickHandler: PropTypes.func,
-  linkProps: PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    url: PropTypes.string,
-    className: PropTypes.string
-  }).isRequired
-};
-BreadcrumbLink.defaultProps = {
-  clickHandler: undefined
-};
 //# sourceMappingURL=BreadcrumbLink.js.map

package/dist/Breadcrumb/BreadcrumbLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreadcrumbLink.js","names":["React","PropTypes","classNames","BreadcrumbLink","as","clickHandler","linkProps","label","url","className","props","addtlProps","console","warn","href","onClick","createElement","propTypes","elementType","isRequired","func","shape","string","defaultProps","undefined"],"sources":["../../src/Breadcrumb/BreadcrumbLink.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nexport default function BreadcrumbLink({ as, clickHandler, linkProps }) {\n  const {\n    label,\n    url,\n    className,\n    ...props\n  } = linkProps;\n  const addtlProps = {};\n\n  if (as === 'a' && url) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      '[Deprecated]: using \"url\" parameter to specify link\\'s destination in Breadcrumb component is '\n      + 'deprecated. Please use \"href\" instead when rendering links as anchor tag.',\n    );\n    addtlProps.href = url;\n  }\n\n  if (clickHandler) {\n    addtlProps.onClick = clickHandler;\n  }\n\n  return React.createElement(\n    as,\n    {\n      ...props,\n      ...addtlProps,\n      className: classNames('link-muted', className),\n    },\n    label,\n  );\n}\n\nBreadcrumbLink.propTypes = {\n  as: PropTypes.elementType.isRequired,\n  clickHandler: PropTypes.func,\n  linkProps: PropTypes.shape({\n    label: PropTypes.string.isRequired,\n    url: PropTypes.string,\n    className: PropTypes.string,\n  }).isRequired,\n};\n\nBreadcrumbLink.defaultProps = {\n  clickHandler: undefined,\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,eAAe,SAASC,cAAcA,CAAC;EAAEC,EAAE;EAAEC,YAAY;EAAEC;AAAU,CAAC,EAAE;EACtE,MAAM;IACJC,KAAK;IACLC,GAAG;IACHC,SAAS;IACT,GAAGC;EACL,CAAC,GAAGJ,SAAS;EACb,MAAMK,UAAU,GAAG,CAAC,CAAC;EAErB,IAAIP,EAAE,KAAK,GAAG,IAAII,GAAG,EAAE;IACrB;IACAI,OAAO,CAACC,IAAI,CACV,gGAAgG,GAC9F,2EACJ,CAAC;IACDF,UAAU,CAACG,IAAI,GAAGN,GAAG;EACvB;EAEA,IAAIH,YAAY,EAAE;IAChBM,UAAU,CAACI,OAAO,GAAGV,YAAY;EACnC;EAEA,oBAAOL,KAAK,CAACgB,aAAa,CACxBZ,EAAE,EACF;IACE,GAAGM,KAAK;IACR,GAAGC,UAAU;IACbF,SAAS,EAAEP,UAAU,CAAC,YAAY,EAAEO,SAAS;EAC/C,CAAC,EACDF,KACF,CAAC;AACH;AAEAJ,cAAc,CAACc,SAAS,GAAG;EACzBb,EAAE,EAAEH,SAAS,CAACiB,WAAW,CAACC,UAAU;EACpCd,YAAY,EAAEJ,SAAS,CAACmB,IAAI;EAC5Bd,SAAS,EAAEL,SAAS,CAACoB,KAAK,CAAC;IACzBd,KAAK,EAAEN,SAAS,CAACqB,MAAM,CAACH,UAAU;IAClCX,GAAG,EAAEP,SAAS,CAACqB,MAAM;IACrBb,SAAS,EAAER,SAAS,CAACqB;EACvB,CAAC,CAAC,CAACH;AACL,CAAC;AAEDhB,cAAc,CAACoB,YAAY,GAAG;EAC5BlB,YAAY,EAAEmB;AAChB,CAAC","ignoreList":[]}
+{"version":3,"file":"BreadcrumbLink.js","names":["React","classNames","BreadcrumbLink","as","clickHandler","undefined","linkProps","label","url","className","props","addtlProps","console","warn","href","onClick","createElement"],"sources":["../../src/Breadcrumb/BreadcrumbLink.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\ninterface BreadcrumbLinkProps {\n  as: React.ElementType;\n  clickHandler?: (event: React.MouseEvent, link: any) => void;\n  linkProps: {\n    label: string;\n    url?: string; // deprecated, use href instead when rendering as 'a'\n    className?: string;\n    [key: string]: any;\n  };\n}\n\ninterface AdditionalProps {\n  href?: string;\n  onClick?: (event: React.MouseEvent, link: any) => void;\n}\n\nexport default function BreadcrumbLink({ as, clickHandler = undefined, linkProps }: BreadcrumbLinkProps) {\n  const {\n    label,\n    url,\n    className,\n    ...props\n  } = linkProps;\n  const addtlProps: AdditionalProps = {};\n\n  if (as === 'a' && url) {\n    // eslint-disable-next-line no-console\n    console.warn(\n      '[Deprecated]: using \"url\" parameter to specify link\\'s destination in Breadcrumb component is '\n      + 'deprecated. Please use \"href\" instead when rendering links as anchor tag.',\n    );\n    addtlProps.href = url;\n  }\n\n  if (clickHandler) {\n    addtlProps.onClick = clickHandler;\n  }\n\n  return React.createElement(\n    as,\n    {\n      ...props,\n      ...addtlProps,\n      className: classNames('link-muted', className),\n    },\n    label,\n  );\n}\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAkBnC,eAAe,SAASC,cAAcA,CAAC;EAAEC,EAAE;EAAEC,YAAY,GAAGC,SAAS;EAAEC;AAA+B,CAAC,EAAE;EACvG,MAAM;IACJC,KAAK;IACLC,GAAG;IACHC,SAAS;IACT,GAAGC;EACL,CAAC,GAAGJ,SAAS;EACb,MAAMK,UAA2B,GAAG,CAAC,CAAC;EAEtC,IAAIR,EAAE,KAAK,GAAG,IAAIK,GAAG,EAAE;IACrB;IACAI,OAAO,CAACC,IAAI,CACV,gGAAgG,GAC9F,2EACJ,CAAC;IACDF,UAAU,CAACG,IAAI,GAAGN,GAAG;EACvB;EAEA,IAAIJ,YAAY,EAAE;IAChBO,UAAU,CAACI,OAAO,GAAGX,YAAY;EACnC;EAEA,oBAAOJ,KAAK,CAACgB,aAAa,CACxBb,EAAE,EACF;IACE,GAAGO,KAAK;IACR,GAAGC,UAAU;IACbF,SAAS,EAAER,UAAU,CAAC,YAAY,EAAEQ,SAAS;EAC/C,CAAC,EACDF,KACF,CAAC;AACH","ignoreList":[]}

package/dist/Breadcrumb/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+interface BreadcrumbProps {
+    /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`
+     * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.
+     */
+    links: Array<{
+        label: string;
+        [key: string]: any;
+    }>;
+    /** allows to add a label that is not a link to the end of the breadcrumb. */
+    activeLabel?: string;
+    /** label of the element */
+    ariaLabel?: string;
+    /** allows to add a custom element between the breadcrumb items.
+     * Defaults to `>` rendered using the `Icon` component. */
+    spacer?: React.ReactElement;
+    /** allows to add a custom function to be called `onClick` of a breadcrumb link.
+     * The use case for this is for adding custom analytics to the component. */
+    clickHandler?: (event: React.MouseEvent, link: any) => void;
+    /** The `Breadcrumbs` style variant to use. */
+    variant?: 'light' | 'dark';
+    /** The `Breadcrumbs` mobile variant view. */
+    isMobile?: boolean;
+    /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or
+     * [react-router's Link](https://reactrouter.com/en/main/components/link).
+     */
+    linkAs?: React.ElementType;
+}
+declare function Breadcrumb({ links, activeLabel, spacer, clickHandler, variant, isMobile, ariaLabel, linkAs, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export default Breadcrumb;

package/dist/Breadcrumb/index.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import BreadcrumbLink from './BreadcrumbLink';
 import { ChevronRight } from '../../icons';
@@ -9,10 +8,10 @@ function Breadcrumb({
   activeLabel,
   spacer,
   clickHandler,
-  variant,
-  isMobile,
-  ariaLabel,
-  linkAs,
+  variant = 'light',
+  isMobile = false,
+  ariaLabel = 'breadcrumb',
+  linkAs = 'a',
   ...props
 }) {
   const linkCount = links.length;
@@ -45,40 +44,5 @@ function Breadcrumb({
     "aria-current": "page"
   }, activeLabel)));
 }
-Breadcrumb.propTypes = {
-  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`
-   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.
-   */
-  links: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string
-  })).isRequired,
-  /** allows to add a label that is not a link to the end of the breadcrumb. */
-  activeLabel: PropTypes.string,
-  /** label of the element */
-  ariaLabel: PropTypes.string,
-  /** allows to add a custom element between the breadcrumb items.
-   * Defaults to `>` rendered using the `Icon` component. */
-  spacer: PropTypes.element,
-  /** allows to add a custom function to be called `onClick` of a breadcrumb link.
-   * The use case for this is for adding custom analytics to the component. */
-  clickHandler: PropTypes.func,
-  /** The `Breadcrumbs` style variant to use. */
-  variant: PropTypes.oneOf(['light', 'dark']),
-  /** The `Breadcrumbs` mobile variant view. */
-  isMobile: PropTypes.bool,
-  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or
-   * [react-router's Link](https://reactrouter.com/en/main/components/link).
-   */
-  linkAs: PropTypes.elementType
-};
-Breadcrumb.defaultProps = {
-  activeLabel: undefined,
-  ariaLabel: 'breadcrumb',
-  spacer: undefined,
-  clickHandler: undefined,
-  variant: 'light',
-  isMobile: false,
-  linkAs: 'a'
-};
 export default Breadcrumb;
 //# sourceMappingURL=index.js.map

package/dist/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","links","activeLabel","spacer","clickHandler","variant","isMobile","ariaLabel","linkAs","props","linkCount","length","displayLinks","createElement","className","map","link","i","Fragment","key","label","as","linkProps","role","src","id","propTypes","arrayOf","shape","string","isRequired","element","func","oneOf","bool","elementType","defaultProps","undefined"],"sources":["../../src/Breadcrumb/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler,\n  variant, isMobile, ariaLabel, linkAs, ...props\n}) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}\n      {...props}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.propTypes = {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: PropTypes.arrayOf(PropTypes.shape({\n    label: PropTypes.string,\n  })).isRequired,\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel: PropTypes.string,\n  /** label of the element */\n  ariaLabel: PropTypes.string,\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer: PropTypes.element,\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler: PropTypes.func,\n  /** The `Breadcrumbs` style variant to use. */\n  variant: PropTypes.oneOf(['light', 'dark']),\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile: PropTypes.bool,\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs: PropTypes.elementType,\n};\n\nBreadcrumb.defaultProps = {\n  activeLabel: undefined,\n  ariaLabel: 'breadcrumb',\n  spacer: undefined,\n  clickHandler: undefined,\n  variant: 'light',\n  isMobile: false,\n  linkAs: 'a',\n};\n\nexport default Breadcrumb;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,IAAI,MAAM,SAAS;AAE1B,SAASC,UAAUA,CAAC;EAClBC,KAAK;EAAEC,WAAW;EAAEC,MAAM;EAAEC,YAAY;EACxCC,OAAO;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,MAAM;EAAE,GAAGC;AAC3C,CAAC,EAAE;EACD,MAAMC,SAAS,GAAGT,KAAK,CAACU,MAAM;EAC9B,MAAMC,YAAY,GAAGN,QAAQ,GAAG,CAACL,KAAK,CAACS,SAAS,GAAG,CAAC,CAAC,CAAC,GAAGT,KAAK;EAE9D,oBACEP,KAAA,CAAAmB,aAAA;IACE,cAAYN,SAAU;IACtBO,SAAS,EAAElB,UAAU,CAAC,iBAAiB,EAAE,mBAAmBS,OAAO,EAAE,CAAE;IAAA,GACnEI;EAAK,gBAETf,KAAA,CAAAmB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,aAAa,EAAE;MAAE,WAAW,EAAEU;IAAS,CAAC;EAAE,GACjEM,YAAY,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,kBACxBvB,KAAA,CAAAmB,aAAA,CAACnB,KAAK,CAACwB,QAAQ;IAACC,GAAG,EAAEH,IAAI,CAACI;EAAM,gBAC9B1B,KAAA,CAAAmB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,kBAAkB;EAAE,gBAC5CF,KAAA,CAAAmB,aAAA,CAAChB,cAAc;IAACwB,EAAE,EAAEb,MAAO;IAACJ,YAAY,EAAEA,YAAa;IAACkB,SAAS,EAAEN;EAAK,CAAE,CACxE,CAAC,EACJ,CAACd,WAAW,IAAMe,CAAC,GAAG,CAAC,GAAIP,SAAU,kBAEpChB,KAAA,CAAAmB,aAAA;IAAIC,SAAS,EAAC,kBAAkB;IAACS,IAAI,EAAC;EAAc,GACjDpB,MAAM,iBAAIT,KAAA,CAAAmB,aAAA,CAACd,IAAI;IAACyB,GAAG,EAAE1B,YAAa;IAAC2B,EAAE,EAAE,UAAUR,CAAC;EAAG,CAAE,CACtD,CAEQ,CACjB,CAAC,EACD,CAACX,QAAQ,IAAIJ,WAAW,iBAAIR,KAAA,CAAAmB,aAAA;IAAIC,SAAS,EAAC,yBAAyB;IAACK,GAAG,EAAC,QAAQ;IAAC,gBAAa;EAAM,GAAEjB,WAAgB,CACrH,CACD,CAAC;AAEV;AAEAF,UAAU,CAAC0B,SAAS,GAAG;EACrB;AACF;AACA;EACEzB,KAAK,EAAEN,SAAS,CAACgC,OAAO,CAAChC,SAAS,CAACiC,KAAK,CAAC;IACvCR,KAAK,EAAEzB,SAAS,CAACkC;EACnB,CAAC,CAAC,CAAC,CAACC,UAAU;EACd;EACA5B,WAAW,EAAEP,SAAS,CAACkC,MAAM;EAC7B;EACAtB,SAAS,EAAEZ,SAAS,CAACkC,MAAM;EAC3B;AACF;EACE1B,MAAM,EAAER,SAAS,CAACoC,OAAO;EACzB;AACF;EACE3B,YAAY,EAAET,SAAS,CAACqC,IAAI;EAC5B;EACA3B,OAAO,EAAEV,SAAS,CAACsC,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;EAC3C;EACA3B,QAAQ,EAAEX,SAAS,CAACuC,IAAI;EACxB;AACF;AACA;EACE1B,MAAM,EAAEb,SAAS,CAACwC;AACpB,CAAC;AAEDnC,UAAU,CAACoC,YAAY,GAAG;EACxBlC,WAAW,EAAEmC,SAAS;EACtB9B,SAAS,EAAE,YAAY;EACvBJ,MAAM,EAAEkC,SAAS;EACjBjC,YAAY,EAAEiC,SAAS;EACvBhC,OAAO,EAAE,OAAO;EAChBC,QAAQ,EAAE,KAAK;EACfE,MAAM,EAAE;AACV,CAAC;AAED,eAAeR,UAAU","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","BreadcrumbLink","ChevronRight","Icon","Breadcrumb","links","activeLabel","spacer","clickHandler","variant","isMobile","ariaLabel","linkAs","props","linkCount","length","displayLinks","createElement","className","map","link","i","Fragment","key","label","as","linkProps","role","src","id"],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\nimport BreadcrumbLink from './BreadcrumbLink';\nimport { ChevronRight } from '../../icons';\nimport Icon from '../Icon';\n\ninterface BreadcrumbProps {\n  /** An array of objects describing links to be rendered. The contents of an object depend on the value of `linkAs`\n   * prop as these objects will get passed down as props to the underlying component defined by `linkAs` prop.\n   */\n  links: Array<{ label: string, [key: string]: any }>;\n  /** allows to add a label that is not a link to the end of the breadcrumb. */\n  activeLabel?: string;\n  /** label of the element */\n  ariaLabel?: string;\n  /** allows to add a custom element between the breadcrumb items.\n   * Defaults to `>` rendered using the `Icon` component. */\n  spacer?: React.ReactElement;\n  /** allows to add a custom function to be called `onClick` of a breadcrumb link.\n   * The use case for this is for adding custom analytics to the component. */\n  clickHandler?: (event: React.MouseEvent, link: any) => void;\n  /** The `Breadcrumbs` style variant to use. */\n  variant?: 'light' | 'dark';\n  /** The `Breadcrumbs` mobile variant view. */\n  isMobile?: boolean;\n  /** Specifies the base element to use when rendering links, you should generally use either plain 'a' or\n   * [react-router's Link](https://reactrouter.com/en/main/components/link).\n   */\n  linkAs?: React.ElementType;\n}\n\nfunction Breadcrumb({\n  links, activeLabel, spacer, clickHandler,\n  variant = 'light', isMobile = false, ariaLabel = 'breadcrumb', linkAs = 'a', ...props\n}: BreadcrumbProps) {\n  const linkCount = links.length;\n  const displayLinks = isMobile ? [links[linkCount - 1]] : links;\n\n  return (\n    <nav\n      aria-label={ariaLabel}\n      className={classNames('pgn__breadcrumb', `pgn__breadcrumb-${variant}`)}\n      {...props}\n    >\n      <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>\n        {displayLinks.map((link, i) => (\n          <React.Fragment key={link.label}>\n            <li className={classNames('list-inline-item')}>\n              <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />\n            </li>\n            {(activeLabel || ((i + 1) < linkCount))\n              && (\n              <li className=\"list-inline-item\" role=\"presentation\">\n                {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}\n              </li>\n              )}\n          </React.Fragment>\n        ))}\n        {!isMobile && activeLabel && <li className=\"list-inline-item active\" key=\"active\" aria-current=\"page\">{activeLabel}</li>}\n      </ol>\n    </nav>\n  );\n}\n\nexport default Breadcrumb;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAEnC,OAAOC,cAAc,MAAM,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,aAAa;AAC1C,OAAOC,IAAI,MAAM,SAAS;AA2B1B,SAASC,UAAUA,CAAC;EAClBC,KAAK;EAAEC,WAAW;EAAEC,MAAM;EAAEC,YAAY;EACxCC,OAAO,GAAG,OAAO;EAAEC,QAAQ,GAAG,KAAK;EAAEC,SAAS,GAAG,YAAY;EAAEC,MAAM,GAAG,GAAG;EAAE,GAAGC;AACjE,CAAC,EAAE;EAClB,MAAMC,SAAS,GAAGT,KAAK,CAACU,MAAM;EAC9B,MAAMC,YAAY,GAAGN,QAAQ,GAAG,CAACL,KAAK,CAACS,SAAS,GAAG,CAAC,CAAC,CAAC,GAAGT,KAAK;EAE9D,oBACEN,KAAA,CAAAkB,aAAA;IACE,cAAYN,SAAU;IACtBO,SAAS,EAAElB,UAAU,CAAC,iBAAiB,EAAE,mBAAmBS,OAAO,EAAE,CAAE;IAAA,GACnEI;EAAK,gBAETd,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,aAAa,EAAE;MAAE,WAAW,EAAEU;IAAS,CAAC;EAAE,GACjEM,YAAY,CAACG,GAAG,CAAC,CAACC,IAAI,EAAEC,CAAC,kBACxBtB,KAAA,CAAAkB,aAAA,CAAClB,KAAK,CAACuB,QAAQ;IAACC,GAAG,EAAEH,IAAI,CAACI;EAAM,gBAC9BzB,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAElB,UAAU,CAAC,kBAAkB;EAAE,gBAC5CD,KAAA,CAAAkB,aAAA,CAAChB,cAAc;IAACwB,EAAE,EAAEb,MAAO;IAACJ,YAAY,EAAEA,YAAa;IAACkB,SAAS,EAAEN;EAAK,CAAE,CACxE,CAAC,EACJ,CAACd,WAAW,IAAMe,CAAC,GAAG,CAAC,GAAIP,SAAU,kBAEpCf,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAC,kBAAkB;IAACS,IAAI,EAAC;EAAc,GACjDpB,MAAM,iBAAIR,KAAA,CAAAkB,aAAA,CAACd,IAAI;IAACyB,GAAG,EAAE1B,YAAa;IAAC2B,EAAE,EAAE,UAAUR,CAAC;EAAG,CAAE,CACtD,CAEQ,CACjB,CAAC,EACD,CAACX,QAAQ,IAAIJ,WAAW,iBAAIP,KAAA,CAAAkB,aAAA;IAAIC,SAAS,EAAC,yBAAyB;IAACK,GAAG,EAAC,QAAQ;IAAC,gBAAa;EAAM,GAAEjB,WAAgB,CACrH,CACD,CAAC;AAEV;AAEA,eAAeF,UAAU","ignoreList":[]}

package/dist/Card/CardCarousel/CardCarouselSubtitle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface CardCarouselSubtitleProps {
+    /** Specifies contents of the component. */
+    children: React.ReactNode;
+    /** Specifies the base element */
+    as?: React.ElementType;
+    /** A class name to append to the base element. */
+    className?: string;
+}
+declare function CardCarouselSubtitle({ children, as, className }: CardCarouselSubtitleProps): import("react/jsx-runtime").JSX.Element;
+export default CardCarouselSubtitle;

package/dist/Card/CardCarousel/CardCarouselSubtitle.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 function CardCarouselSubtitle({
   children,
@@ -11,17 +10,5 @@ function CardCarouselSubtitle({
     className: classNames('pgn__card-carousel-subtitle', className)
   }, children);
 }
-CardCarouselSubtitle.propTypes = {
-  /** Specifies contents of the component. */
-  children: PropTypes.node.isRequired,
-  /** Specifies the base element */
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  /** A class name to append to the base element. */
-  className: PropTypes.string
-};
-CardCarouselSubtitle.defaultProps = {
-  as: undefined,
-  className: undefined
-};
 export default CardCarouselSubtitle;
 //# sourceMappingURL=CardCarouselSubtitle.js.map

package/dist/Card/CardCarousel/CardCarouselSubtitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardCarouselSubtitle.js","names":["React","PropTypes","classNames","CardCarouselSubtitle","children","as","className","Component","createElement","propTypes","node","isRequired","oneOfType","string","elementType","defaultProps","undefined"],"sources":["../../../src/Card/CardCarousel/CardCarouselSubtitle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction CardCarouselSubtitle({ children, as, className }) {\n  const Component = as || 'p';\n  return (\n    <Component className={classNames('pgn__card-carousel-subtitle', className)}>\n      {children}\n    </Component>\n  );\n}\n\nCardCarouselSubtitle.propTypes = {\n  /** Specifies contents of the component. */\n  children: PropTypes.node.isRequired,\n  /** Specifies the base element */\n  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n  /** A class name to append to the base element. */\n  className: PropTypes.string,\n};\n\nCardCarouselSubtitle.defaultProps = {\n  as: undefined,\n  className: undefined,\n};\n\nexport default CardCarouselSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,oBAAoBA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAU,CAAC,EAAE;EACzD,MAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,oBACEL,KAAA,CAAAQ,aAAA,CAACD,SAAS;IAACD,SAAS,EAAEJ,UAAU,CAAC,6BAA6B,EAAEI,SAAS;EAAE,GACxEF,QACQ,CAAC;AAEhB;AAEAD,oBAAoB,CAACM,SAAS,GAAG;EAC/B;EACAL,QAAQ,EAAEH,SAAS,CAACS,IAAI,CAACC,UAAU;EACnC;EACAN,EAAE,EAAEJ,SAAS,CAACW,SAAS,CAAC,CAACX,SAAS,CAACY,MAAM,EAAEZ,SAAS,CAACa,WAAW,CAAC,CAAC;EAClE;EACAR,SAAS,EAAEL,SAAS,CAACY;AACvB,CAAC;AAEDV,oBAAoB,CAACY,YAAY,GAAG;EAClCV,EAAE,EAAEW,SAAS;EACbV,SAAS,EAAEU;AACb,CAAC;AAED,eAAeb,oBAAoB","ignoreList":[]}
+{"version":3,"file":"CardCarouselSubtitle.js","names":["React","classNames","CardCarouselSubtitle","children","as","className","Component","createElement"],"sources":["../../../src/Card/CardCarousel/CardCarouselSubtitle.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\ninterface CardCarouselSubtitleProps {\n  /** Specifies contents of the component. */\n  children: React.ReactNode;\n  /** Specifies the base element */\n  as?: React.ElementType;\n  /** A class name to append to the base element. */\n  className?: string;\n}\n\nfunction CardCarouselSubtitle({ children, as, className }: CardCarouselSubtitleProps) {\n  const Component = as || 'p';\n  return (\n    <Component className={classNames('pgn__card-carousel-subtitle', className)}>\n      {children}\n    </Component>\n  );\n}\n\nexport default CardCarouselSubtitle;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAWnC,SAASC,oBAAoBA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAqC,CAAC,EAAE;EACpF,MAAMC,SAAS,GAAGF,EAAE,IAAI,GAAG;EAC3B,oBACEJ,KAAA,CAAAO,aAAA,CAACD,SAAS;IAACD,SAAS,EAAEJ,UAAU,CAAC,6BAA6B,EAAEI,SAAS;EAAE,GACxEF,QACQ,CAAC;AAEhB;AAEA,eAAeD,oBAAoB","ignoreList":[]}

package/dist/Card/CardCarousel/CardCarouselTitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CardCarouselTitleProps {
+    children: React.ReactNode;
+    as?: React.ElementType;
+    className?: string;
+}
+declare function CardCarouselTitle({ children, as, className }: CardCarouselTitleProps): import("react/jsx-runtime").JSX.Element;
+export default CardCarouselTitle;

package/dist/Card/CardCarousel/CardCarouselTitle.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 function CardCarouselTitle({
   children,
@@ -11,14 +10,5 @@ function CardCarouselTitle({
     className: classNames('pgn__card-carousel-title', className)
   }, children);
 }
-CardCarouselTitle.propTypes = {
-  children: PropTypes.node.isRequired,
-  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  className: PropTypes.string
-};
-CardCarouselTitle.defaultProps = {
-  as: undefined,
-  className: undefined
-};
 export default CardCarouselTitle;
 //# sourceMappingURL=CardCarouselTitle.js.map

package/dist/Card/CardCarousel/CardCarouselTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardCarouselTitle.js","names":["React","PropTypes","classNames","CardCarouselTitle","children","as","className","Component","createElement","propTypes","node","isRequired","oneOfType","string","elementType","defaultProps","undefined"],"sources":["../../../src/Card/CardCarousel/CardCarouselTitle.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nfunction CardCarouselTitle({ children, as, className }) {\n  const Component = as || 'h2';\n  return (\n    <Component className={classNames('pgn__card-carousel-title', className)}>\n      {children}\n    </Component>\n  );\n}\n\nCardCarouselTitle.propTypes = {\n  children: PropTypes.node.isRequired,\n  as: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),\n  className: PropTypes.string,\n};\n\nCardCarouselTitle.defaultProps = {\n  as: undefined,\n  className: undefined,\n};\n\nexport default CardCarouselTitle;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,iBAAiBA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAU,CAAC,EAAE;EACtD,MAAMC,SAAS,GAAGF,EAAE,IAAI,IAAI;EAC5B,oBACEL,KAAA,CAAAQ,aAAA,CAACD,SAAS;IAACD,SAAS,EAAEJ,UAAU,CAAC,0BAA0B,EAAEI,SAAS;EAAE,GACrEF,QACQ,CAAC;AAEhB;AAEAD,iBAAiB,CAACM,SAAS,GAAG;EAC5BL,QAAQ,EAAEH,SAAS,CAACS,IAAI,CAACC,UAAU;EACnCN,EAAE,EAAEJ,SAAS,CAACW,SAAS,CAAC,CAACX,SAAS,CAACY,MAAM,EAAEZ,SAAS,CAACa,WAAW,CAAC,CAAC;EAClER,SAAS,EAAEL,SAAS,CAACY;AACvB,CAAC;AAEDV,iBAAiB,CAACY,YAAY,GAAG;EAC/BV,EAAE,EAAEW,SAAS;EACbV,SAAS,EAAEU;AACb,CAAC;AAED,eAAeb,iBAAiB","ignoreList":[]}
+{"version":3,"file":"CardCarouselTitle.js","names":["React","classNames","CardCarouselTitle","children","as","className","Component","createElement"],"sources":["../../../src/Card/CardCarousel/CardCarouselTitle.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\n\ninterface CardCarouselTitleProps {\n  children: React.ReactNode;\n  as?: React.ElementType;\n  className?: string;\n}\n\nfunction CardCarouselTitle({ children, as, className }: CardCarouselTitleProps) {\n  const Component = as || 'h2';\n  return (\n    <Component className={classNames('pgn__card-carousel-title', className)}>\n      {children}\n    </Component>\n  );\n}\n\nexport default CardCarouselTitle;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,UAAU,MAAM,YAAY;AAQnC,SAASC,iBAAiBA,CAAC;EAAEC,QAAQ;EAAEC,EAAE;EAAEC;AAAkC,CAAC,EAAE;EAC9E,MAAMC,SAAS,GAAGF,EAAE,IAAI,IAAI;EAC5B,oBACEJ,KAAA,CAAAO,aAAA,CAACD,SAAS;IAACD,SAAS,EAAEJ,UAAU,CAAC,0BAA0B,EAAEI,SAAS;EAAE,GACrEF,QACQ,CAAC;AAEhB;AAEA,eAAeD,iBAAiB","ignoreList":[]}

package/dist/IconButton/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { type Placement } from 'react-bootstrap/Overlay';
-interface Props extends React.HTMLAttributes<HTMLButtonElement> {
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     /** Component that renders the icon, currently defaults to `Icon` */
     iconAs?: React.ComponentType<any>;
     /** Additional CSS class[es] to apply to this button */

package/dist/IconButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","classNames","OverlayTrigger","Tooltip","Icon","IconButton","forwardRef","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","ref","invert","activeStyle","IconComponent","createElement","type","IconButtonWithTooltip","tooltipPlacement","tooltipContent","props","placement","overlay","id","undefined"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Placement } from 'react-bootstrap/Overlay';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.HTMLAttributes<HTMLButtonElement> {\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs?: React.ComponentType<any>,\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  /** No children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors = false,\n  icon,\n  src,\n  iconClassNames,\n  onClick = () => {},\n  size = 'md',\n  variant = 'primary',\n  iconAs = Icon,\n  isActive = false,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n} : Props, ref: React.ForwardedRef<HTMLButtonElement>) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\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          <IconComponent\n            className={classNames('btn-icon__icon', iconClassNames)}\n            icon={icon as any}\n            src={src}\n          />\n        )}\n      </span>\n    </button>\n  );\n});\n\ninterface PropsWithTooltip extends Props {\n  /** Tooltip placement can be top, left, right etc, 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 = 'top', 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\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,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,IAAI,MAAM,SAAS;AAmC1B,MAAMC,UAAU,gBAAGL,KAAK,CAACM,UAAU,CAAC,CAAC;EACnCC,SAAS;EACTC,GAAG;EACHC,YAAY,GAAG,KAAK;EACpBC,IAAI;EACJC,GAAG;EACHC,cAAc;EACdC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClBC,IAAI,GAAG,IAAI;EACXC,OAAO,GAAG,SAAS;EACnBC,MAAM,GAAGZ,IAAI;EACba,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EAAE;EACV,GAAGC;AACG,CAAC,EAAEC,GAA0C,KAAK;EACxD,MAAMC,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,MAAMa,WAAW,GAAGL,QAAQ,GAAG,GAAGF,OAAO,GAAG,GAAG,EAAE;EACjD,MAAMQ,aAAa,GAAGP,MAAM;EAE5B,oBACEhB,KAAA,CAAAwB,aAAA;IACE,cAAYhB,GAAI;IAChBD,SAAS,EAAEN,UAAU,CACnB,UAAU,EACV,YAAYoB,MAAM,GAAGN,OAAO,EAAE,EAC9B,YAAYD,IAAI,EAAE,EAClB;MACE,CAAC,YAAYO,MAAM,GAAGC,WAAW,QAAQ,GAAGL;IAC9C,CAAC,EACDV,SACF,CAAE;IACFM,OAAO,EAAEA,OAAQ;IACjBY,IAAI,EAAC,QAAQ;IACbL,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAK,gBAETnB,KAAA,CAAAwB,aAAA;IAAMjB,SAAS,EAAC;EAA0B,GACvCgB,aAAa,iBACZvB,KAAA,CAAAwB,aAAA,CAACD,aAAa;IACZhB,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEW,cAAc,CAAE;IACxDF,IAAI,EAAEA,IAAY;IAClBC,GAAG,EAAEA;EAAI,CACV,CAEC,CACA,CAAC;AAEb,CAAC,CAAC;AASF;AACA;AACA;AACA,SAASe,qBAAqBA,CAAC;EAC7BC,gBAAgB,GAAG,KAAK;EAAEC,cAAc;EAAE,GAAGC;AAC7B,CAAC,EAAE;EACnB,MAAMR,MAAM,GAAGQ,KAAK,CAACpB,YAAY,GAAG,UAAU,GAAG,EAAE;EACnD,oBACET,KAAA,CAAAwB,aAAA,CAACtB,cAAc;IACb4B,SAAS,EAAEH,gBAAiB;IAC5BI,OAAO,eACL/B,KAAA,CAAAwB,aAAA,CAACrB,OAAO;MACN6B,EAAE,EAAE,sBAAsBL,gBAAgB,EAAG;MAC7CZ,OAAO,EAAEM,MAAM,GAAG,OAAO,GAAGY;IAAU,GAErCL,cACM;EACT,gBAEF5B,KAAA,CAAAwB,aAAA,CAACnB,UAAU;IAAA,GAAKwB;EAAK,CAAG,CACV,CAAC;AAErB;AAECxB,UAAU,CAASqB,qBAAqB,GAAGA,qBAAqB;AAEjE,eAAerB,UAAU;AAGzB,SAASqB,qBAAqB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","classNames","OverlayTrigger","Tooltip","Icon","IconButton","forwardRef","className","alt","invertColors","icon","src","iconClassNames","onClick","size","variant","iconAs","isActive","children","attrs","ref","invert","activeStyle","IconComponent","createElement","type","IconButtonWithTooltip","tooltipPlacement","tooltipContent","props","placement","overlay","id","undefined"],"sources":["../../src/IconButton/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Placement } from 'react-bootstrap/Overlay';\nimport { OverlayTrigger } from '../Overlay';\nimport Tooltip from '../Tooltip';\nimport Icon from '../Icon';\n\ninterface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Component that renders the icon, currently defaults to `Icon` */\n  iconAs?: React.ComponentType<any>,\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  /** No children */\n  children?: never;\n}\n\nconst IconButton = React.forwardRef(({\n  className,\n  alt,\n  invertColors = false,\n  icon,\n  src,\n  iconClassNames,\n  onClick = () => {},\n  size = 'md',\n  variant = 'primary',\n  iconAs = Icon,\n  isActive = false,\n  children, // unused, just here because we don't want it to be part of 'attrs'\n  ...attrs\n} : Props, ref: React.ForwardedRef<HTMLButtonElement>) => {\n  const invert = invertColors ? 'inverse-' : '';\n  const activeStyle = isActive ? `${variant}-` : '';\n  const IconComponent = iconAs;\n\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          <IconComponent\n            className={classNames('btn-icon__icon', iconClassNames)}\n            icon={icon as any}\n            src={src}\n          />\n        )}\n      </span>\n    </button>\n  );\n});\n\ninterface PropsWithTooltip extends Props {\n  /** Tooltip placement can be top, left, right etc, 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 = 'top', 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\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,UAAU,MAAM,YAAY;AAEnC,SAASC,cAAc,QAAQ,YAAY;AAC3C,OAAOC,OAAO,MAAM,YAAY;AAChC,OAAOC,IAAI,MAAM,SAAS;AAmC1B,MAAMC,UAAU,gBAAGL,KAAK,CAACM,UAAU,CAAC,CAAC;EACnCC,SAAS;EACTC,GAAG;EACHC,YAAY,GAAG,KAAK;EACpBC,IAAI;EACJC,GAAG;EACHC,cAAc;EACdC,OAAO,GAAGA,CAAA,KAAM,CAAC,CAAC;EAClBC,IAAI,GAAG,IAAI;EACXC,OAAO,GAAG,SAAS;EACnBC,MAAM,GAAGZ,IAAI;EACba,QAAQ,GAAG,KAAK;EAChBC,QAAQ;EAAE;EACV,GAAGC;AACG,CAAC,EAAEC,GAA0C,KAAK;EACxD,MAAMC,MAAM,GAAGZ,YAAY,GAAG,UAAU,GAAG,EAAE;EAC7C,MAAMa,WAAW,GAAGL,QAAQ,GAAG,GAAGF,OAAO,GAAG,GAAG,EAAE;EACjD,MAAMQ,aAAa,GAAGP,MAAM;EAE5B,oBACEhB,KAAA,CAAAwB,aAAA;IACE,cAAYhB,GAAI;IAChBD,SAAS,EAAEN,UAAU,CACnB,UAAU,EACV,YAAYoB,MAAM,GAAGN,OAAO,EAAE,EAC9B,YAAYD,IAAI,EAAE,EAClB;MACE,CAAC,YAAYO,MAAM,GAAGC,WAAW,QAAQ,GAAGL;IAC9C,CAAC,EACDV,SACF,CAAE;IACFM,OAAO,EAAEA,OAAQ;IACjBY,IAAI,EAAC,QAAQ;IACbL,GAAG,EAAEA,GAAI;IAAA,GACLD;EAAK,gBAETnB,KAAA,CAAAwB,aAAA;IAAMjB,SAAS,EAAC;EAA0B,GACvCgB,aAAa,iBACZvB,KAAA,CAAAwB,aAAA,CAACD,aAAa;IACZhB,SAAS,EAAEN,UAAU,CAAC,gBAAgB,EAAEW,cAAc,CAAE;IACxDF,IAAI,EAAEA,IAAY;IAClBC,GAAG,EAAEA;EAAI,CACV,CAEC,CACA,CAAC;AAEb,CAAC,CAAC;AASF;AACA;AACA;AACA,SAASe,qBAAqBA,CAAC;EAC7BC,gBAAgB,GAAG,KAAK;EAAEC,cAAc;EAAE,GAAGC;AAC7B,CAAC,EAAE;EACnB,MAAMR,MAAM,GAAGQ,KAAK,CAACpB,YAAY,GAAG,UAAU,GAAG,EAAE;EACnD,oBACET,KAAA,CAAAwB,aAAA,CAACtB,cAAc;IACb4B,SAAS,EAAEH,gBAAiB;IAC5BI,OAAO,eACL/B,KAAA,CAAAwB,aAAA,CAACrB,OAAO;MACN6B,EAAE,EAAE,sBAAsBL,gBAAgB,EAAG;MAC7CZ,OAAO,EAAEM,MAAM,GAAG,OAAO,GAAGY;IAAU,GAErCL,cACM;EACT,gBAEF5B,KAAA,CAAAwB,aAAA,CAACnB,UAAU;IAAA,GAAKwB;EAAK,CAAG,CACV,CAAC;AAErB;AAECxB,UAAU,CAASqB,qBAAqB,GAAGA,qBAAqB;AAEjE,eAAerB,UAAU;AAGzB,SAASqB,qBAAqB","ignoreList":[]}

package/dist/IconButtonToggle/index.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 /**
  *
  * @param {object} args arguments
- * @param {boolean} args.activeValue the current value of the active/selected iconButton.
+ * @param {string} args.activeValue the current value of the active/selected iconButton.
  *                                   if not provided, none of the iconButtons will initially be active
  * @param {Function} args.onChange callback to call when toggle value changes.
  *                                 Receives value of the selected toggle button.

package/dist/IconButtonToggle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {boolean} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAE;EAC7D,MAAMC,WAAW,GAAGN,OAAO,CACzB,MAAMD,KAAK,CAACQ,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAEI,UAAU,IAAI;IAC/C,MAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;IACvD,oBAAOJ,KAAK,CAACc,YAAY,CAACJ,UAAU,EAAE;MACpCK,OAAO,EAAEA,CAAA,KAAM;QAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;MAAE,CAAC;MACpDF,QAAQ;MACR,eAAe,EAAEA,QAAQ;MACzB,aAAa,EAAE,gBAAgBD,UAAU,CAACE,KAAK,CAACC,KAAK;IACvD,CAAC,CAAC;EACJ,CAAC,CAAC,EACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAOL,KAAA,CAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEV,WAAiB,CAAC;AAChF;AAEAJ,gBAAgB,CAACe,YAAY,GAAG;EAC9Bb,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBD,WAAW,EAAEe;AACf,CAAC;AAEDhB,gBAAgB,CAACiB,SAAS,GAAG;EAC3B;EACAhB,WAAW,EAAEF,SAAS,CAACmB,MAAM;EAC7B;EACAhB,QAAQ,EAAEH,SAAS,CAACoB,IAAI;EACxB;EACAhB,QAAQ,EAAEJ,SAAS,CAACqB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAerB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","useMemo","PropTypes","IconButtonToggle","activeValue","onChange","children","iconButtons","Children","map","iconButton","isActive","props","value","cloneElement","onClick","createElement","className","defaultProps","undefined","propTypes","string","func","node","isRequired"],"sources":["../../src/IconButtonToggle/index.jsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport PropTypes from 'prop-types';\n\n/**\n *\n * @param {object} args arguments\n * @param {string} args.activeValue the current value of the active/selected iconButton.\n *                                   if not provided, none of the iconButtons will initially be active\n * @param {Function} args.onChange callback to call when toggle value changes.\n *                                 Receives value of the selected toggle button.\n * @param {Array<IconButton>} args.children children components expected to be IconButton\n * @returns {React.Component} A React component\n */\nfunction IconButtonToggle({ activeValue, onChange, children }) {\n  const iconButtons = useMemo(\n    () => React.Children.map(children, iconButton => {\n      const isActive = iconButton.props.value === activeValue;\n      return React.cloneElement(iconButton, {\n        onClick: () => { onChange(iconButton.props.value); },\n        isActive,\n        'aria-selected': isActive,\n        'data-testid': `icon-btn-val-${iconButton.props.value}`,\n      });\n    }),\n    [children, activeValue, onChange],\n  );\n  return <div className=\"pgn__icon-button-toggle__container\">{iconButtons}</div>;\n}\n\nIconButtonToggle.defaultProps = {\n  onChange: () => {},\n  activeValue: undefined,\n};\n\nIconButtonToggle.propTypes = {\n  /** value to use to check which button to set to active */\n  activeValue: PropTypes.string,\n  /** handler that is passed the currently active button's value when a button is selected */\n  onChange: PropTypes.func,\n  /** child nodes of type `IconButton` (or its subcomponents) to be rendered within toggle group */\n  children: PropTypes.node.isRequired,\n};\n\nexport default IconButtonToggle;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,OAAOC,SAAS,MAAM,YAAY;;AAElC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,gBAAgBA,CAAC;EAAEC,WAAW;EAAEC,QAAQ;EAAEC;AAAS,CAAC,EAAE;EAC7D,MAAMC,WAAW,GAAGN,OAAO,CACzB,MAAMD,KAAK,CAACQ,QAAQ,CAACC,GAAG,CAACH,QAAQ,EAAEI,UAAU,IAAI;IAC/C,MAAMC,QAAQ,GAAGD,UAAU,CAACE,KAAK,CAACC,KAAK,KAAKT,WAAW;IACvD,oBAAOJ,KAAK,CAACc,YAAY,CAACJ,UAAU,EAAE;MACpCK,OAAO,EAAEA,CAAA,KAAM;QAAEV,QAAQ,CAACK,UAAU,CAACE,KAAK,CAACC,KAAK,CAAC;MAAE,CAAC;MACpDF,QAAQ;MACR,eAAe,EAAEA,QAAQ;MACzB,aAAa,EAAE,gBAAgBD,UAAU,CAACE,KAAK,CAACC,KAAK;IACvD,CAAC,CAAC;EACJ,CAAC,CAAC,EACF,CAACP,QAAQ,EAAEF,WAAW,EAAEC,QAAQ,CAClC,CAAC;EACD,oBAAOL,KAAA,CAAAgB,aAAA;IAAKC,SAAS,EAAC;EAAoC,GAAEV,WAAiB,CAAC;AAChF;AAEAJ,gBAAgB,CAACe,YAAY,GAAG;EAC9Bb,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBD,WAAW,EAAEe;AACf,CAAC;AAEDhB,gBAAgB,CAACiB,SAAS,GAAG;EAC3B;EACAhB,WAAW,EAAEF,SAAS,CAACmB,MAAM;EAC7B;EACAhB,QAAQ,EAAEH,SAAS,CAACoB,IAAI;EACxB;EACAhB,QAAQ,EAAEJ,SAAS,CAACqB,IAAI,CAACC;AAC3B,CAAC;AAED,eAAerB,gBAAgB","ignoreList":[]}

package/dist/SearchField/index.scss

@@ -91,6 +91,10 @@
   &.pgn__searchfield--external {
     border: none;
 
+    .pgn__searchfield-form {
+      background-color: transparent;
+    }
+
     &.has-focus {
       box-shadow: none;
 
@@ -112,6 +116,7 @@
     display: flex;
     align-items: center;
     width: 100%;
+    background-color: var(--pgn-color-search-field-form-bg);
     border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
 
     &:hover,

package/dist/core.css

@@ -15529,6 +15529,9 @@ select.form-control {
 .pgn__searchfield.pgn__searchfield--external {
   border: none;
 }
+.pgn__searchfield.pgn__searchfield--external .pgn__searchfield-form {
+  background-color: transparent;
+}
 .pgn__searchfield.pgn__searchfield--external.has-focus {
   box-shadow: none;
 }
@@ -15546,6 +15549,7 @@ select.form-control {
   display: flex;
   align-items: center;
   width: 100%;
+  background-color: var(--pgn-color-search-field-form-bg);
   border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
 }
 .pgn__searchfield .pgn__searchfield_wrapper:hover, .pgn__searchfield .pgn__searchfield_wrapper:active {