@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/dist/Button/button-group.scss

@@ -0,0 +1,126 @@
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    &:hover {
+      z-index: 1;
+    }
+
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: calc(var(--pgn-size-btn-border-width) * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-sm > .btn { @extend .btn-sm; }
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+.dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
+  padding-left: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
+}
+
+.btn-group.show .dropdown-toggle {
+  box-shadow: var(--pgn-elevation-btn-box-shadow-active);
+
+  &.btn-link {
+    box-shadow: none;
+  }
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc(var(--pgn-size-btn-border-width) * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0;
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

package/dist/Button/index.js

@@ -1,6 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["children", "iconAfter", "iconBefore", "size"],
-  _excluded2 = ["size"];
+var _excluded = ["children", "iconAfter", "iconBefore"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -15,31 +14,26 @@ import classNames from 'classnames';
 import BaseButton from 'react-bootstrap/Button';
 import BaseButtonGroup from 'react-bootstrap/ButtonGroup';
 import BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';
-// @ts-ignore - we're not going to bother adding types for the deprecated button
-import ButtonDeprecated from './deprecated';
 import Icon from '../Icon';
 var Button = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     iconAfter = _ref.iconAfter,
     iconBefore = _ref.iconBefore,
-    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(BaseButton, _extends({
-    size: size // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
-  }, props, {
+  return /*#__PURE__*/React.createElement(BaseButton, _extends({}, props, {
     className: classNames(props.className),
     ref: ref
   }), iconBefore && /*#__PURE__*/React.createElement(Icon, {
     className: "btn-icon-before",
-    size: size,
+    size: props.size,
     src: iconBefore
   }), children, iconAfter && /*#__PURE__*/React.createElement(Icon, {
     className: "btn-icon-after",
-    size: size,
+    size: props.size,
     src: iconAfter
   }));
 });
-Button.propTypes = {
+Button.propTypes = _objectSpread(_objectSpread({}, Button.propTypes), {}, {
   /** Specifies class name to apply to the button */
   className: PropTypes.string,
   /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */
@@ -65,14 +59,11 @@ Button.propTypes = {
   variant: PropTypes.string,
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconBefore: PropTypes.elementType,
+  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
   /** An icon component to render.
   * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */
-  iconAfter: PropTypes.elementType
-  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally
-  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.
-  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).
-};
+  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node])
+});
 Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {}, {
   children: undefined,
   className: undefined,
@@ -80,30 +71,19 @@ Button.defaultProps = _objectSpread(_objectSpread({}, Button.defaultProps), {},
   iconAfter: undefined,
   disabled: false
 });
-Button.Deprecated = ButtonDeprecated;
-
-// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently
-// override them to add propTypes validation at runtime, since most Paragon
-// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'
-// prop to accept our custom values of 'md' and 'inline' which are used in
-// Paragon but not used in the base Bootstrap classes.
-
-var ButtonGroup = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
-  var size = _ref2.size,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(BaseButtonGroup, _extends({
-    size: size
-  }, props, {
-    ref: ref
-  }));
-});
+function ButtonGroup(props) {
+  return /*#__PURE__*/React.createElement(BaseButtonGroup, props);
+}
+function ButtonToolbar(props) {
+  return /*#__PURE__*/React.createElement(BaseButtonToolbar, props);
+}
 ButtonGroup.propTypes = {
   /** Specifies element type for this component. */
   as: PropTypes.elementType,
   /** An ARIA role describing the button group. */
   role: PropTypes.string,
   /** Specifies the size for all Buttons in the group. */
-  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
   /** Display as a button toggle group. */
   toggle: PropTypes.bool,
   /** Specifies if the set of Buttons should appear vertically stacked. */
@@ -119,11 +99,6 @@ ButtonGroup.defaultProps = {
   bsPrefix: 'btn-group',
   size: 'md'
 };
-var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(BaseButtonToolbar, _extends({}, props, {
-    ref: ref
-  }));
-});
 ButtonToolbar.propTypes = {
   /** An ARIA role describing the button group. */
   role: PropTypes.string,

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","ButtonDeprecated","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","size","props","_objectWithoutProperties","_excluded","createElement","_extends","className","src","propTypes","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","elementType","defaultProps","_objectSpread","undefined","Deprecated","ButtonGroup","_ref2","_excluded2","as","role","oneOf","toggle","vertical","bsPrefix","ButtonToolbar"],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import React from 'react';\nimport PropTypes, { type Requireable } from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';\nimport BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar, { type ButtonToolbarProps } from 'react-bootstrap/ButtonToolbar';\nimport type { ComponentWithAsProp } from '../utils/types/bootstrap';\n// @ts-ignore - we're not going to bother adding types for the deprecated button\nimport ButtonDeprecated from './deprecated';\n\nimport Icon from '../Icon';\n\ninterface ButtonProps extends Omit<BaseButtonProps, 'size'> {\n  /**\n   * An icon component to render. Example:\n   * ```\n   * import { Close } from '@openedx/paragon/icons';\n   * <Button iconBefore={Close}>Close</Button>\n   * ```\n   */\n  iconBefore?: React.ComponentType;\n  /**\n   * An icon component to render. Example:\n   * ```\n   * import { Close } from '@openedx/paragon/icons';\n   * <Button iconAfter={Close}>Close</Button>\n   * ```\n   */\n  iconAfter?: React.ComponentType;\n  size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\ntype ButtonType = ComponentWithAsProp<'button', ButtonProps> & { Deprecated?: any };\n\nconst Button: ButtonType = React.forwardRef<HTMLButtonElement, ButtonProps>(({\n  children,\n  iconAfter,\n  iconBefore,\n  size,\n  ...props\n}, ref) => (\n  <BaseButton\n    size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.\n    {...props}\n    className={classNames(props.className)}\n    ref={ref}\n  >\n    {iconBefore && <Icon className=\"btn-icon-before\" size={size} src={iconBefore} />}\n    {children}\n    {iconAfter && <Icon className=\"btn-icon-after\" size={size} src={iconAfter} />}\n  </BaseButton>\n));\n\nButton.propTypes = {\n  /** Specifies class name to apply to the button */\n  className: PropTypes.string,\n  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n  disabled: PropTypes.bool,\n  /** Specifies the text that is displayed within the button. */\n  children: PropTypes.node.isRequired,\n  /** A function that would specify what the button should do when the `onClick` event is triggered.\n   * For example, the button could launch a `Modal`. The default is an empty function. */\n  onClick: PropTypes.func,\n  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n   * For example, this could handle using the `Escape` key to trigger the button's action.\n   * The default is an empty function. */\n  onKeyDown: PropTypes.func,\n  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */\n  type: PropTypes.string,\n  /** Specifies variant to use.\n   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n   * `light`, `link`\n   *\n   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n   * or `inverse-outline-`)\n   * */\n  variant: PropTypes.string,\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconBefore: PropTypes.elementType as Requireable<React.ComponentType>,\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconAfter: PropTypes.elementType as Requireable<React.ComponentType>,\n  // The 'as' type casting above is required for TypeScript checking, because the 'PropTypes.elementType' type normally\n  // allows strings as a value (for use cases like 'div') but we don't support that for <Icon />/iconBefore/iconAfter.\n  // The React TypeScript type definitions are more specific (React.ComponentType vs React.ElementType).\n};\n\nButton.defaultProps = {\n  ...Button.defaultProps,\n  children: undefined,\n  className: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  disabled: false,\n};\n\nButton.Deprecated = ButtonDeprecated;\n\n// We could just re-export 'ButtonGroup' and 'ButtonToolbar', but we currently\n// override them to add propTypes validation at runtime, since most Paragon\n// consumers aren't using TypeScript yet. We also force ButtonGroup's 'size'\n// prop to accept our custom values of 'md' and 'inline' which are used in\n// Paragon but not used in the base Bootstrap classes.\n\ninterface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {\n  size?: 'sm' | 'md' | 'lg' | 'inline';\n}\n\nconst ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (\n  React.forwardRef<HTMLButtonElement, ButtonGroupProps>(({ size, ...props }, ref) => (\n    <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />\n  ))\n);\n\nButtonGroup.propTypes = {\n  /** Specifies element type for this component. */\n  as: PropTypes.elementType,\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Specifies the size for all Buttons in the group. */\n  size: PropTypes.oneOf(['sm', 'md', 'lg', 'inline']),\n  /** Display as a button toggle group. */\n  toggle: PropTypes.bool,\n  /** Specifies if the set of Buttons should appear vertically stacked. */\n  vertical: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n  as: 'div',\n  role: 'group',\n  toggle: false,\n  vertical: false,\n  bsPrefix: 'btn-group',\n  size: 'md',\n};\n\nconst ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (\n  React.forwardRef<HTMLButtonElement, ButtonToolbarProps>((props, ref) => (\n    <BaseButtonToolbar {...props} ref={ref} />\n  ))\n);\n\nButtonToolbar.propTypes = {\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n  role: 'toolbar',\n  bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","PropTypes","classNames","BaseButton","BaseButtonGroup","BaseButtonToolbar","Icon","Button","forwardRef","_ref","ref","children","iconAfter","iconBefore","props","_objectWithoutProperties","_excluded","createElement","_extends","className","size","src","propTypes","_objectSpread","string","disabled","bool","node","isRequired","onClick","func","onKeyDown","type","variant","oneOfType","elementType","defaultProps","undefined","ButtonGroup","ButtonToolbar","as","role","oneOf","toggle","vertical","bsPrefix"],"sources":["../../src/Button/index.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport BaseButton from 'react-bootstrap/Button';\nimport BaseButtonGroup from 'react-bootstrap/ButtonGroup';\nimport BaseButtonToolbar from 'react-bootstrap/ButtonToolbar';\n\nimport Icon from '../Icon';\n\nconst Button = React.forwardRef(({\n  children,\n  iconAfter,\n  iconBefore,\n  ...props\n}, ref) => (\n  <BaseButton\n    {...props}\n    className={classNames(props.className)}\n    ref={ref}\n  >\n    {iconBefore && <Icon className=\"btn-icon-before\" size={props.size} src={iconBefore} />}\n    {children}\n    {iconAfter && <Icon className=\"btn-icon-after\" size={props.size} src={iconAfter} />}\n  </BaseButton>\n));\n\nButton.propTypes = {\n  ...Button.propTypes,\n  /** Specifies class name to apply to the button */\n  className: PropTypes.string,\n  /** Disables the Button, preventing mouse events, even if the underlying component is an `<a>` element */\n  disabled: PropTypes.bool,\n  /** Specifies the text that is displayed within the button. */\n  children: PropTypes.node.isRequired,\n  /** A function that would specify what the button should do when the `onClick` event is triggered.\n   * For example, the button could launch a `Modal`. The default is an empty function. */\n  onClick: PropTypes.func,\n  /** A function that would specify what the button should do when the `onKeyDown` event is triggered.\n   * For example, this could handle using the `Escape` key to trigger the button's action.\n   * The default is an empty function. */\n  onKeyDown: PropTypes.func,\n  /** Used to set the `type` attribute on the `button` tag.  The default type is `button`. */\n  type: PropTypes.string,\n  /** Specifies variant to use.\n   * Can be on of the base variants: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `dark`,\n   * `light`, `link`\n   *\n   * as well as one of the customized variants (= base variant prefixed with `inverse-`, `outline-`\n   * or `inverse-outline-`)\n   * */\n  variant: PropTypes.string,\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconBefore: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n  /** An icon component to render.\n  * Example import of a Paragon icon component: `import { Check } from '@openedx/paragon/icons';` */\n  iconAfter: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),\n};\n\nButton.defaultProps = {\n  ...Button.defaultProps,\n  children: undefined,\n  className: undefined,\n  iconBefore: undefined,\n  iconAfter: undefined,\n  disabled: false,\n};\n\nfunction ButtonGroup(props) {\n  return <BaseButtonGroup {...props} />;\n}\nfunction ButtonToolbar(props) {\n  return <BaseButtonToolbar {...props} />;\n}\n\nButtonGroup.propTypes = {\n  /** Specifies element type for this component. */\n  as: PropTypes.elementType,\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Specifies the size for all Buttons in the group. */\n  size: PropTypes.oneOf(['sm', 'md', 'lg']),\n  /** Display as a button toggle group. */\n  toggle: PropTypes.bool,\n  /** Specifies if the set of Buttons should appear vertically stacked. */\n  vertical: PropTypes.bool,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonGroup.defaultProps = {\n  as: 'div',\n  role: 'group',\n  toggle: false,\n  vertical: false,\n  bsPrefix: 'btn-group',\n  size: 'md',\n};\n\nButtonToolbar.propTypes = {\n  /** An ARIA role describing the button group. */\n  role: PropTypes.string,\n  /** Overrides underlying component base CSS class name */\n  bsPrefix: PropTypes.string,\n};\n\nButtonToolbar.defaultProps = {\n  role: 'toolbar',\n  bsPrefix: 'btn-toolbar',\n};\n\nexport default Button;\nexport { ButtonGroup, ButtonToolbar };\n"],"mappings":";;;;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,UAAU,MAAM,wBAAwB;AAC/C,OAAOC,eAAe,MAAM,6BAA6B;AACzD,OAAOC,iBAAiB,MAAM,+BAA+B;AAE7D,OAAOC,IAAI,MAAM,SAAS;AAE1B,IAAMC,MAAM,gBAAGP,KAAK,CAACQ,UAAU,CAAC,UAAAC,IAAA,EAK7BC,GAAG;EAAA,IAJJC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,SAAS,GAAAH,IAAA,CAATG,SAAS;IACTC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACPC,KAAK,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA;EAAA,oBAERhB,KAAA,CAAAiB,aAAA,CAACd,UAAU,EAAAe,QAAA,KACLJ,KAAK;IACTK,SAAS,EAAEjB,UAAU,CAACY,KAAK,CAACK,SAAS,CAAE;IACvCT,GAAG,EAAEA;EAAI,IAERG,UAAU,iBAAIb,KAAA,CAAAiB,aAAA,CAACX,IAAI;IAACa,SAAS,EAAC,iBAAiB;IAACC,IAAI,EAAEN,KAAK,CAACM,IAAK;IAACC,GAAG,EAAER;EAAW,CAAE,CAAC,EACrFF,QAAQ,EACRC,SAAS,iBAAIZ,KAAA,CAAAiB,aAAA,CAACX,IAAI;IAACa,SAAS,EAAC,gBAAgB;IAACC,IAAI,EAAEN,KAAK,CAACM,IAAK;IAACC,GAAG,EAAET;EAAU,CAAE,CACxE,CAAC;AAAA,CACd,CAAC;AAEFL,MAAM,CAACe,SAAS,GAAAC,aAAA,CAAAA,aAAA,KACXhB,MAAM,CAACe,SAAS;EACnB;EACAH,SAAS,EAAElB,SAAS,CAACuB,MAAM;EAC3B;EACAC,QAAQ,EAAExB,SAAS,CAACyB,IAAI;EACxB;EACAf,QAAQ,EAAEV,SAAS,CAAC0B,IAAI,CAACC,UAAU;EACnC;AACF;EACEC,OAAO,EAAE5B,SAAS,CAAC6B,IAAI;EACvB;AACF;AACA;EACEC,SAAS,EAAE9B,SAAS,CAAC6B,IAAI;EACzB;EACAE,IAAI,EAAE/B,SAAS,CAACuB,MAAM;EACtB;AACF;AACA;AACA;AACA;AACA;AACA;EACES,OAAO,EAAEhC,SAAS,CAACuB,MAAM;EACzB;AACF;EACEX,UAAU,EAAEZ,SAAS,CAACiC,SAAS,CAAC,CAACjC,SAAS,CAACkC,WAAW,EAAElC,SAAS,CAAC0B,IAAI,CAAC,CAAC;EACxE;AACF;EACEf,SAAS,EAAEX,SAAS,CAACiC,SAAS,CAAC,CAACjC,SAAS,CAACkC,WAAW,EAAElC,SAAS,CAAC0B,IAAI,CAAC;AAAC,EACxE;AAEDpB,MAAM,CAAC6B,YAAY,GAAAb,aAAA,CAAAA,aAAA,KACdhB,MAAM,CAAC6B,YAAY;EACtBzB,QAAQ,EAAE0B,SAAS;EACnBlB,SAAS,EAAEkB,SAAS;EACpBxB,UAAU,EAAEwB,SAAS;EACrBzB,SAAS,EAAEyB,SAAS;EACpBZ,QAAQ,EAAE;AAAK,EAChB;AAED,SAASa,WAAWA,CAACxB,KAAK,EAAE;EAC1B,oBAAOd,KAAA,CAAAiB,aAAA,CAACb,eAAe,EAAKU,KAAQ,CAAC;AACvC;AACA,SAASyB,aAAaA,CAACzB,KAAK,EAAE;EAC5B,oBAAOd,KAAA,CAAAiB,aAAA,CAACZ,iBAAiB,EAAKS,KAAQ,CAAC;AACzC;AAEAwB,WAAW,CAAChB,SAAS,GAAG;EACtB;EACAkB,EAAE,EAAEvC,SAAS,CAACkC,WAAW;EACzB;EACAM,IAAI,EAAExC,SAAS,CAACuB,MAAM;EACtB;EACAJ,IAAI,EAAEnB,SAAS,CAACyC,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;EACzC;EACAC,MAAM,EAAE1C,SAAS,CAACyB,IAAI;EACtB;EACAkB,QAAQ,EAAE3C,SAAS,CAACyB,IAAI;EACxB;EACAmB,QAAQ,EAAE5C,SAAS,CAACuB;AACtB,CAAC;AAEDc,WAAW,CAACF,YAAY,GAAG;EACzBI,EAAE,EAAE,KAAK;EACTC,IAAI,EAAE,OAAO;EACbE,MAAM,EAAE,KAAK;EACbC,QAAQ,EAAE,KAAK;EACfC,QAAQ,EAAE,WAAW;EACrBzB,IAAI,EAAE;AACR,CAAC;AAEDmB,aAAa,CAACjB,SAAS,GAAG;EACxB;EACAmB,IAAI,EAAExC,SAAS,CAACuB,MAAM;EACtB;EACAqB,QAAQ,EAAE5C,SAAS,CAACuB;AACtB,CAAC;AAEDe,aAAa,CAACH,YAAY,GAAG;EAC3BK,IAAI,EAAE,SAAS;EACfI,QAAQ,EAAE;AACZ,CAAC;AAED,eAAetC,MAAM;AACrB,SAAS+B,WAAW,EAAEC,aAAa","ignoreList":[]}