@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/dist/SearchField/SearchFieldSubmitButton.js

@@ -1,28 +1,26 @@
-const _excluded = ["variant", "submitButtonLocation", "buttonText"];
+var _excluded = ["variant", "submitButtonLocation", "buttonText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 import { SearchFieldContext } from './SearchFieldAdvanced';
 import Button from '../Button';
-const STYLE_VARIANTS = ['light', 'dark'];
-const BUTTON_LOCATION_VARIANTS = ['internal', 'external'];
+import IconButton from '../IconButton';
+import Icon from '../Icon';
+var STYLE_VARIANTS = ['light', 'dark'];
+var BUTTON_LOCATION_VARIANTS = ['internal', 'external'];
 function SearchFieldSubmitButton(props) {
-  const {
-      variant,
-      submitButtonLocation,
-      buttonText
-    } = props,
+  var variant = props.variant,
+    submitButtonLocation = props.submitButtonLocation,
+    buttonText = props.buttonText,
     others = _objectWithoutProperties(props, _excluded);
-  const {
-    screenReaderText,
-    icons,
-    refs,
-    value,
-    disabled
-  } = useContext(SearchFieldContext);
+  var _useContext = useContext(SearchFieldContext),
+    screenReaderText = _useContext.screenReaderText,
+    icons = _useContext.icons,
+    refs = _useContext.refs,
+    value = _useContext.value,
+    disabled = _useContext.disabled;
   if (submitButtonLocation === 'internal' && value.length) {
     return null;
   }
@@ -34,14 +32,16 @@ function SearchFieldSubmitButton(props) {
     disabled: disabled
   }, others), buttonText, /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
-  }, screenReaderText.submitButton)) : /*#__PURE__*/React.createElement("button", _extends({
+  }, screenReaderText.submitButton)) : /*#__PURE__*/React.createElement(IconButton, _extends({
+    className: "pgn__searchfield__iconbutton-submit",
     type: "submit",
-    className: classNames('btn'),
-    ref: refs.submitButton,
-    disabled: disabled
-  }, others), icons.submit, /*#__PURE__*/React.createElement("span", {
-    className: "sr-only"
-  }, screenReaderText.submitButton));
+    src: icons.submit,
+    size: "sm",
+    iconAs: Icon,
+    alt: screenReaderText.submitButton,
+    disabled: disabled,
+    ref: refs.submitButton
+  }, others));
 }
 SearchFieldSubmitButton.propTypes = {
   /** The button style variant to use. */

package/dist/SearchField/SearchFieldSubmitButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchFieldSubmitButton.js","names":["React","useContext","PropTypes","classNames","SearchFieldContext","Button","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchFieldSubmitButton","props","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","screenReaderText","icons","refs","value","disabled","length","createElement","_extends","type","ref","submitButton","className","submit","propTypes","oneOf","string","defaultProps"],"sources":["../../src/SearchField/SearchFieldSubmitButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\n\nimport { SearchFieldContext } from './SearchFieldAdvanced';\nimport Button from '../Button';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchFieldSubmitButton(props) {\n  const {\n    variant, submitButtonLocation, buttonText, ...others\n  } = props;\n  const {\n    screenReaderText, icons, refs, value, disabled,\n  } = useContext(SearchFieldContext);\n\n  if (submitButtonLocation === 'internal' && value.length) {\n    return null;\n  }\n\n  return submitButtonLocation === 'external' ? (\n    <Button\n      type=\"submit\"\n      ref={refs.submitButton}\n      variant={variant === 'light' ? 'primary' : 'brand'}\n      className=\"pgn__searchfield__button\"\n      disabled={disabled}\n      {...others}\n    >\n      {buttonText}\n      <span className=\"sr-only\">{screenReaderText.submitButton}</span>\n    </Button>\n  ) : (\n    <button\n      type=\"submit\"\n      className={classNames('btn')}\n      ref={refs.submitButton}\n      disabled={disabled}\n      {...others}\n    >\n      {icons.submit}\n      <span className=\"sr-only\">{screenReaderText.submitButton}</span>\n    </button>\n  );\n}\n\nSearchFieldSubmitButton.propTypes = {\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchFieldSubmitButton.defaultProps = {\n  variant: 'light',\n  submitButtonLocation: 'internal',\n  buttonText: 'Search',\n};\n\nexport default SearchFieldSubmitButton;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AAEnC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,MAAM,MAAM,WAAW;AAE9B,MAAMC,cAAc,GAAG,CACrB,OAAO,EACP,MAAM,CACP;AAED,MAAMC,wBAAwB,GAAG,CAC/B,UAAU,EACV,UAAU,CACX;AAED,SAASC,uBAAuBA,CAACC,KAAK,EAAE;EACtC,MAAM;MACJC,OAAO;MAAEC,oBAAoB;MAAEC;IACjC,CAAC,GAAGH,KAAK;IADuCI,MAAM,GAAAC,wBAAA,CAClDL,KAAK,EAAAM,SAAA;EACT,MAAM;IACJC,gBAAgB;IAAEC,KAAK;IAAEC,IAAI;IAAEC,KAAK;IAAEC;EACxC,CAAC,GAAGnB,UAAU,CAACG,kBAAkB,CAAC;EAElC,IAAIO,oBAAoB,KAAK,UAAU,IAAIQ,KAAK,CAACE,MAAM,EAAE;IACvD,OAAO,IAAI;EACb;EAEA,OAAOV,oBAAoB,KAAK,UAAU,gBACxCX,KAAA,CAAAsB,aAAA,CAACjB,MAAM,EAAAkB,QAAA;IACLC,IAAI,EAAC,QAAQ;IACbC,GAAG,EAAEP,IAAI,CAACQ,YAAa;IACvBhB,OAAO,EAAEA,OAAO,KAAK,OAAO,GAAG,SAAS,GAAG,OAAQ;IACnDiB,SAAS,EAAC,0BAA0B;IACpCP,QAAQ,EAAEA;EAAS,GACfP,MAAM,GAETD,UAAU,eACXZ,KAAA,CAAAsB,aAAA;IAAMK,SAAS,EAAC;EAAS,GAAEX,gBAAgB,CAACU,YAAmB,CACzD,CAAC,gBAET1B,KAAA,CAAAsB,aAAA,WAAAC,QAAA;IACEC,IAAI,EAAC,QAAQ;IACbG,SAAS,EAAExB,UAAU,CAAC,KAAK,CAAE;IAC7BsB,GAAG,EAAEP,IAAI,CAACQ,YAAa;IACvBN,QAAQ,EAAEA;EAAS,GACfP,MAAM,GAETI,KAAK,CAACW,MAAM,eACb5B,KAAA,CAAAsB,aAAA;IAAMK,SAAS,EAAC;EAAS,GAAEX,gBAAgB,CAACU,YAAmB,CACzD,CACT;AACH;AAEAlB,uBAAuB,CAACqB,SAAS,GAAG;EAClC;EACAnB,OAAO,EAAER,SAAS,CAAC4B,KAAK,CAACxB,cAAc,CAAC;EACxC;EACAK,oBAAoB,EAAET,SAAS,CAAC4B,KAAK,CAACvB,wBAAwB,CAAC;EAC/D;AACF;AACA;AACA;EACEK,UAAU,EAAEV,SAAS,CAAC6B;AACxB,CAAC;AAEDvB,uBAAuB,CAACwB,YAAY,GAAG;EACrCtB,OAAO,EAAE,OAAO;EAChBC,oBAAoB,EAAE,UAAU;EAChCC,UAAU,EAAE;AACd,CAAC;AAED,eAAeJ,uBAAuB"}
+{"version":3,"file":"SearchFieldSubmitButton.js","names":["React","useContext","PropTypes","SearchFieldContext","Button","IconButton","Icon","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchFieldSubmitButton","props","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","_useContext","screenReaderText","icons","refs","value","disabled","length","createElement","_extends","type","ref","submitButton","className","src","submit","size","iconAs","alt","propTypes","oneOf","string","defaultProps"],"sources":["../../src/SearchField/SearchFieldSubmitButton.jsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { SearchFieldContext } from './SearchFieldAdvanced';\nimport Button from '../Button';\nimport IconButton from '../IconButton';\nimport Icon from '../Icon';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchFieldSubmitButton(props) {\n  const {\n    variant, submitButtonLocation, buttonText, ...others\n  } = props;\n  const {\n    screenReaderText, icons, refs, value, disabled,\n  } = useContext(SearchFieldContext);\n\n  if (submitButtonLocation === 'internal' && value.length) {\n    return null;\n  }\n\n  return submitButtonLocation === 'external' ? (\n    <Button\n      type=\"submit\"\n      ref={refs.submitButton}\n      variant={variant === 'light' ? 'primary' : 'brand'}\n      className=\"pgn__searchfield__button\"\n      disabled={disabled}\n      {...others}\n    >\n      {buttonText}\n      <span className=\"sr-only\">{screenReaderText.submitButton}</span>\n    </Button>\n  ) : (\n    <IconButton\n      className=\"pgn__searchfield__iconbutton-submit\"\n      type=\"submit\"\n      src={icons.submit}\n      size=\"sm\"\n      iconAs={Icon}\n      alt={screenReaderText.submitButton}\n      disabled={disabled}\n      ref={refs.submitButton}\n      {...others}\n    />\n  );\n}\n\nSearchFieldSubmitButton.propTypes = {\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchFieldSubmitButton.defaultProps = {\n  variant: 'light',\n  submitButtonLocation: 'internal',\n  buttonText: 'Search',\n};\n\nexport default SearchFieldSubmitButton;\n"],"mappings":";;;;AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,kBAAkB,QAAQ,uBAAuB;AAC1D,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,IAAI,MAAM,SAAS;AAE1B,IAAMC,cAAc,GAAG,CACrB,OAAO,EACP,MAAM,CACP;AAED,IAAMC,wBAAwB,GAAG,CAC/B,UAAU,EACV,UAAU,CACX;AAED,SAASC,uBAAuBA,CAACC,KAAK,EAAE;EACtC,IACEC,OAAO,GACLD,KAAK,CADPC,OAAO;IAAEC,oBAAoB,GAC3BF,KAAK,CADEE,oBAAoB;IAAEC,UAAU,GACvCH,KAAK,CADwBG,UAAU;IAAKC,MAAM,GAAAC,wBAAA,CAClDL,KAAK,EAAAM,SAAA;EACT,IAAAC,WAAA,GAEIhB,UAAU,CAACE,kBAAkB,CAAC;IADhCe,gBAAgB,GAAAD,WAAA,CAAhBC,gBAAgB;IAAEC,KAAK,GAAAF,WAAA,CAALE,KAAK;IAAEC,IAAI,GAAAH,WAAA,CAAJG,IAAI;IAAEC,KAAK,GAAAJ,WAAA,CAALI,KAAK;IAAEC,QAAQ,GAAAL,WAAA,CAARK,QAAQ;EAGhD,IAAIV,oBAAoB,KAAK,UAAU,IAAIS,KAAK,CAACE,MAAM,EAAE;IACvD,OAAO,IAAI;EACb;EAEA,OAAOX,oBAAoB,KAAK,UAAU,gBACxCZ,KAAA,CAAAwB,aAAA,CAACpB,MAAM,EAAAqB,QAAA;IACLC,IAAI,EAAC,QAAQ;IACbC,GAAG,EAAEP,IAAI,CAACQ,YAAa;IACvBjB,OAAO,EAAEA,OAAO,KAAK,OAAO,GAAG,SAAS,GAAG,OAAQ;IACnDkB,SAAS,EAAC,0BAA0B;IACpCP,QAAQ,EAAEA;EAAS,GACfR,MAAM,GAETD,UAAU,eACXb,KAAA,CAAAwB,aAAA;IAAMK,SAAS,EAAC;EAAS,GAAEX,gBAAgB,CAACU,YAAmB,CACzD,CAAC,gBAET5B,KAAA,CAAAwB,aAAA,CAACnB,UAAU,EAAAoB,QAAA;IACTI,SAAS,EAAC,qCAAqC;IAC/CH,IAAI,EAAC,QAAQ;IACbI,GAAG,EAAEX,KAAK,CAACY,MAAO;IAClBC,IAAI,EAAC,IAAI;IACTC,MAAM,EAAE3B,IAAK;IACb4B,GAAG,EAAEhB,gBAAgB,CAACU,YAAa;IACnCN,QAAQ,EAAEA,QAAS;IACnBK,GAAG,EAAEP,IAAI,CAACQ;EAAa,GACnBd,MAAM,CACX,CACF;AACH;AAEAL,uBAAuB,CAAC0B,SAAS,GAAG;EAClC;EACAxB,OAAO,EAAET,SAAS,CAACkC,KAAK,CAAC7B,cAAc,CAAC;EACxC;EACAK,oBAAoB,EAAEV,SAAS,CAACkC,KAAK,CAAC5B,wBAAwB,CAAC;EAC/D;AACF;AACA;AACA;EACEK,UAAU,EAAEX,SAAS,CAACmC;AACxB,CAAC;AAED5B,uBAAuB,CAAC6B,YAAY,GAAG;EACrC3B,OAAO,EAAE,OAAO;EAChBC,oBAAoB,EAAE,UAAU;EAChCC,UAAU,EAAE;AACd,CAAC;AAED,eAAeJ,uBAAuB"}

package/dist/SearchField/_variables.scss

@@ -0,0 +1,14 @@
+$search-btn-variants: (
+  "light":  $primary-500,
+  "dark":   $brand-500,
+);
+$search-border-radius:                0 !default;
+$search-border-color:                 $gray-500 !default;
+$search-form-background-color:        $white !default;
+$search-border-color-interaction:     $black !default;
+$search-border-width:                 .0625rem !default;
+$search-disabled-opacity:             .3 !default;
+$search-button-margin:                .5rem !default;
+$input-height-search:                 calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$search-border-focus-color:           $black !default;
+$search-border-focus-width:           .3125rem !default;

package/dist/SearchField/index.js

@@ -1,8 +1,7 @@
-const _excluded = ["label", "placeholder", "inputProps", "variant", "submitButtonLocation", "buttonText"];
+var _excluded = ["label", "placeholder", "inputProps", "variant", "submitButtonLocation", "buttonText"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { Search, Close } from '../../icons';
@@ -11,26 +10,25 @@ import SearchFieldLabel from './SearchFieldLabel';
 import SearchFieldInput from './SearchFieldInput';
 import SearchFieldClearButton from './SearchFieldClearButton';
 import SearchFieldSubmitButton from './SearchFieldSubmitButton';
-import Icon from '../Icon';
-export const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';
-export const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';
-export const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';
-export const SEARCH_FIELD_BUTTON_TEXT = 'search';
-const STYLE_VARIANTS = ['light', 'dark'];
-const BUTTON_LOCATION_VARIANTS = ['internal', 'external'];
+export var SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';
+export var SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';
+export var SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';
+export var SEARCH_FIELD_BUTTON_TEXT = 'search';
+var STYLE_VARIANTS = ['light', 'dark'];
+var BUTTON_LOCATION_VARIANTS = ['internal', 'external'];
 function SearchField(props) {
-  const {
-      label,
-      placeholder,
-      inputProps,
-      variant,
-      submitButtonLocation,
-      buttonText
-    } = props,
+  var label = props.label,
+    placeholder = props.placeholder,
+    inputProps = props.inputProps,
+    variant = props.variant,
+    submitButtonLocation = props.submitButtonLocation,
+    buttonText = props.buttonText,
     others = _objectWithoutProperties(props, _excluded);
-  const Wrapper = useCallback(wrapperProps => submitButtonLocation === 'external' ? /*#__PURE__*/React.createElement("div", {
-    className: "pgn__searchfield_wrapper"
-  }, wrapperProps.children) : wrapperProps.children, [submitButtonLocation]);
+  var Wrapper = useCallback(function (wrapperProps) {
+    return submitButtonLocation === 'external' ? /*#__PURE__*/React.createElement("div", {
+      className: "pgn__searchfield_wrapper"
+    }, wrapperProps.children) : wrapperProps.children;
+  }, [submitButtonLocation]);
   return /*#__PURE__*/React.createElement(SearchField.Advanced, _extends({}, others, {
     submitButtonLocation: submitButtonLocation
   }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(SearchField.Label, null, label), /*#__PURE__*/React.createElement(SearchField.Input, _extends({
@@ -110,8 +108,8 @@ SearchField.propTypes = {
    *
    * ```jsx
    * {
-   *   submit: import {Search} from '@edx/paragon/icons';,
-   *   clear: import {Close} from '@edx/paragon/icons'.
+   *   submit: import {Search} from '@openedx/paragon/icons';,
+   *   clear: import {Close} from '@openedx/paragon/icons'.
    * }
    * ```
    */
@@ -150,17 +148,13 @@ SearchField.defaultProps = {
     clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON
   },
   icons: {
-    clear: /*#__PURE__*/React.createElement(Icon, {
-      src: Close
-    }),
-    submit: /*#__PURE__*/React.createElement(Icon, {
-      src: Search
-    })
+    clear: Close,
+    submit: Search
   },
-  onBlur: () => {},
-  onChange: () => {},
-  onFocus: () => {},
-  onClear: () => {},
+  onBlur: function onBlur() {},
+  onChange: function onChange() {},
+  onFocus: function onFocus() {},
+  onClear: function onClear() {},
   inputProps: {},
   variant: 'light',
   disabled: false,

package/dist/SearchField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","Icon","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","src","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["/* eslint-disable max-len */\nimport React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nimport Icon from '../Icon';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@edx/paragon/icons';,\n   *   clear: import {Close} from '@edx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: <Icon src={Close} />,\n    submit: <Icon src={Search} />,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useCallback","PropTypes","Search","Close","SearchFieldAdvanced","SearchFieldContext","SearchFieldLabel","SearchFieldInput","SearchFieldClearButton","SearchFieldSubmitButton","SEARCH_FIELD_SCREEN_READER_TEXT_LABEL","SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON","SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON","SEARCH_FIELD_BUTTON_TEXT","STYLE_VARIANTS","BUTTON_LOCATION_VARIANTS","SearchField","props","label","placeholder","inputProps","variant","submitButtonLocation","buttonText","others","_objectWithoutProperties","_excluded","Wrapper","wrapperProps","createElement","className","children","Advanced","_extends","Label","Input","ClearButton","SubmitButton","propTypes","onSubmit","func","isRequired","oneOfType","string","element","onBlur","onChange","onClear","onFocus","screenReaderText","shape","submitButton","clearButton","value","icons","submit","clear","formAriaLabel","oneOf","disabled","bool","defaultProps","undefined","Context"],"sources":["../../src/SearchField/index.jsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Search, Close } from '../../icons';\nimport SearchFieldAdvanced, { SearchFieldContext } from './SearchFieldAdvanced';\nimport SearchFieldLabel from './SearchFieldLabel';\nimport SearchFieldInput from './SearchFieldInput';\nimport SearchFieldClearButton from './SearchFieldClearButton';\nimport SearchFieldSubmitButton from './SearchFieldSubmitButton';\n\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';\nexport const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';\nexport const SEARCH_FIELD_BUTTON_TEXT = 'search';\n\nconst STYLE_VARIANTS = [\n  'light',\n  'dark',\n];\n\nconst BUTTON_LOCATION_VARIANTS = [\n  'internal',\n  'external',\n];\n\nfunction SearchField(props) {\n  const {\n    label,\n    placeholder,\n    inputProps,\n    variant,\n    submitButtonLocation,\n    buttonText,\n    ...others\n  } = props;\n\n  const Wrapper = useCallback(\n    (wrapperProps) => (submitButtonLocation === 'external'\n      ? <div className=\"pgn__searchfield_wrapper\">{wrapperProps.children}</div>\n      : wrapperProps.children),\n    [submitButtonLocation],\n  );\n\n  return (\n    <SearchField.Advanced {...others} submitButtonLocation={submitButtonLocation}>\n      <Wrapper>\n        <SearchField.Label>{label}</SearchField.Label>\n        <SearchField.Input placeholder={placeholder} {...inputProps} />\n        <SearchField.ClearButton />\n      </Wrapper>\n      <SearchField.SubmitButton\n        variant={variant}\n        submitButtonLocation={submitButtonLocation}\n        buttonText={buttonText}\n      />\n    </SearchField.Advanced>\n  );\n}\n\nSearchField.propTypes = {\n  /**\n   * Specifies a callback function for when the `SearchField` is submitted by the user. For example:\n   *\n   *```jsx\n   * <SearchField onSubmit={(value) => { console.log(value); } />\n   * ```\n   */\n  onSubmit: PropTypes.func.isRequired,\n  /** Specifies the label to use for the input field (e.g., for i18n translations). */\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  /** Specifies a custom class name. */\n  className: PropTypes.string,\n  /**\n   * Specifies a callback function for when the user loses focus in the\n   * `SearchField` component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onBlur={event => console.log(event)} />\n   * ```\n   */\n  onBlur: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is changed by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onChange={value => console.log(value)} />\n   * ```\n   */\n  onChange: PropTypes.func,\n  /**\n   * Specifies a callback function for when the value in `SearchField`\n   * is cleared by the user. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onClear={() => console.log('search cleared')} />\n   * ```\n   */\n  onClear: PropTypes.func,\n  /**\n   * Specifies a callback function for when the user focuses in the `SearchField`\n   * component. The default is an empty function. For example:\n   *\n   * ```jsx\n   * <SearchField onFocus={event => console.log(event)} />\n   * ```\n   */\n  onFocus: PropTypes.func,\n  /** Specifies the placeholder text for the input. */\n  placeholder: PropTypes.string,\n  /**\n   * Specifies the screenreader text for both the clear and submit buttons\n   * (e.g., for i18n translations). The default is `{ label: 'search',\n   * clearButton: 'clear search', searchButton: 'submit search' }`.\n   */\n  screenReaderText: PropTypes.shape({\n    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,\n    clearButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),\n  }),\n  /** Specifies the initial value for the input. The default is an empty string. */\n  value: PropTypes.string,\n  /**\n   * Specifies the icon element(s) to use for the clear and submit buttons.\n   * The default is:\n   *\n   * ```jsx\n   * {\n   *   submit: import {Search} from '@openedx/paragon/icons';,\n   *   clear: import {Close} from '@openedx/paragon/icons'.\n   * }\n   * ```\n   */\n  icons: PropTypes.shape({\n    submit: PropTypes.element.isRequired,\n    clear: PropTypes.element,\n  }),\n  /**\n   * Specifies the aria-label attribute on the form element.\n   * This is useful if you use the `SearchField` component more than once on a page.\n   */\n  formAriaLabel: PropTypes.string,\n  /** Props to be passed to the form input */\n  inputProps: PropTypes.shape({}),\n  /** The button style variant to use. */\n  variant: PropTypes.oneOf(STYLE_VARIANTS),\n  /** Specifies whether the `SearchField` is disabled. */\n  disabled: PropTypes.bool,\n  /** Controls whether the search button is internal as an icon or external as a button. */\n  submitButtonLocation: PropTypes.oneOf(BUTTON_LOCATION_VARIANTS),\n  /**\n   * Specifies a text that is displayed on the button.\n   * The `submitButtonLocation` prop should be set to `external`.\n   */\n  buttonText: PropTypes.string,\n};\n\nSearchField.defaultProps = {\n  label: undefined,\n  placeholder: undefined,\n  className: undefined,\n  formAriaLabel: undefined,\n  value: '',\n  screenReaderText: {\n    label: SEARCH_FIELD_SCREEN_READER_TEXT_LABEL,\n    submitButton: SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON,\n    clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,\n  },\n  icons: {\n    clear: Close,\n    submit: Search,\n  },\n  onBlur: () => {},\n  onChange: () => {},\n  onFocus: () => {},\n  onClear: () => {},\n  inputProps: {},\n  variant: 'light',\n  disabled: false,\n  submitButtonLocation: 'internal',\n  buttonText: SEARCH_FIELD_BUTTON_TEXT,\n};\n\nSearchField.Advanced = SearchFieldAdvanced;\nSearchField.Label = SearchFieldLabel;\nSearchField.Input = SearchFieldInput;\nSearchField.ClearButton = SearchFieldClearButton;\nSearchField.SubmitButton = SearchFieldSubmitButton;\nSearchField.Context = SearchFieldContext;\n\nexport default SearchField;\n"],"mappings":"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"}

package/dist/SearchField/index.scss

@@ -1,22 +1,24 @@
+@import "variables";
+
 .pgn__searchfield {
-  transition: var(--pgn-transition-form-input);
-  border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
+  transition: $input-transition;
+  border: $search-border-width solid $search-border-color;
 
   .pgn__searchfield-form {
     display: flex;
     align-items: center;
     width: 100%;
-    background-color: var(--pgn-color-search-field-form-bg);
+    background-color: $search-form-background-color;
   }
 
   .btn:focus-visible {
     outline: none;
     position: relative;
-    transition: var(--pgn-transition-form-input);
+    transition: $input-transition;
 
     &::after {
       content: "";
-      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+      border: $search-border-focus-width double $search-border-focus-color;
       position: absolute;
       width: 100%;
       height: 100%;
@@ -25,7 +27,7 @@
 
   &.disabled,
   &:disabled {
-    opacity: var(--pgn-other-search-field-disabled-opacity);
+    opacity: $search-disabled-opacity;
     pointer-events: none;
   }
 
@@ -34,26 +36,26 @@
 
     &::after {
       content: "";
-      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+      border: $search-border-focus-width double $search-border-focus-color;
       position: absolute;
       width: 100%;
       height: 100%;
     }
 
     .pgn__searchfield_wrapper {
-      box-shadow: 0 0 0 var(--pgn-size-search-field-border-width-base) var(--pgn-color-search-field-border-interaction);
+      box-shadow: 0 0 0 $search-border-width $search-border-color-interaction;
     }
   }
 
   &:hover,
   &:active {
-    border-color: var(--pgn-color-search-field-border-interaction);
+    border-color: $search-border-color-interaction;
   }
 
   .form-control {
     border: none;
-    border-radius: var(--pgn-size-search-field-border-radius);
-    height: var(--pgn-size-search-field-search-input-height);
+    border-radius: $search-border-radius;
+    height: $input-height-search;
 
     &:focus {
       box-shadow: none;
@@ -89,14 +91,6 @@
   &.pgn__searchfield--external {
     border: none;
 
-    .btn-primary {
-      background: var(--pgn-color-search-field-button-bg-primary);
-    }
-
-    .btn-brand {
-      background: var(--pgn-color-search-field-button-bg-brand);
-    }
-
     &.has-focus {
       box-shadow: none;
 
@@ -105,20 +99,12 @@
 
         &::after {
           content: "";
-          border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+          border: $search-border-focus-width double $search-border-focus-color;
           position: absolute;
           width: 100%;
           height: 100%;
         }
       }
-
-      .btn-primary {
-        background: var(--pgn-color-search-field-button-bg-primary);
-      }
-
-      .btn-brand {
-        background: var(--pgn-color-search-field-button-bg-brand);
-      }
     }
   }
 
@@ -126,16 +112,22 @@
     display: flex;
     align-items: center;
     width: 100%;
-    border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
+    border: $search-border-width solid $search-border-color;
 
     &:hover,
     &:active {
-      border-color: var(--pgn-color-search-field-border-interaction);
+      border-color: $search-border-color-interaction;
     }
   }
 }
 
 .pgn__searchfield__button.btn[type="submit"] {
   border-radius: 0;
-  margin-inline-start: var(--pgn-spacing-search-field-margin-button);
+  margin-inline-start: $search-button-margin;
+}
+
+.pgn__searchfield__iconbutton-submit,
+.pgn__searchfield__iconbutton-reset {
+  flex-shrink: 0;
+  margin-inline-end: map-get($spacers, 1);
 }

package/dist/SelectableBox/SelectableBoxSet.js

@@ -1,9 +1,10 @@
-const _excluded = ["children", "name", "value", "defaultValue", "onChange", "type", "columns", "className", "ariaLabel", "ariaLabelledby"];
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["children", "name", "value", "defaultValue", "onChange", "type", "columns", "className", "ariaLabel", "ariaLabelledby"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _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; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
@@ -11,30 +12,28 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { getInputType } from './utils';
 import { requiredWhenNot } from '../utils/propTypes';
-const INPUT_TYPES = ['radio', 'checkbox'];
-const DEFAULT_COLUMNS_NUMBER = 2;
-const SelectableBoxSet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-      children,
-      name,
-      value,
-      defaultValue,
-      onChange,
-      type,
-      columns,
-      className,
-      ariaLabel,
-      ariaLabelledby
-    } = _ref,
+var INPUT_TYPES = ['radio', 'checkbox'];
+var DEFAULT_COLUMNS_NUMBER = 2;
+var SelectableBoxSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    name = _ref.name,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    type = _ref.type,
+    columns = _ref.columns,
+    className = _ref.className,
+    ariaLabel = _ref.ariaLabel,
+    ariaLabelledby = _ref.ariaLabelledby,
     props = _objectWithoutProperties(_ref, _excluded);
-  const inputType = getInputType('SelectableBoxSet', type);
+  var inputType = getInputType('SelectableBoxSet', type);
   return /*#__PURE__*/React.createElement(inputType, _objectSpread({
-    name,
-    value,
-    defaultValue,
-    onChange,
-    ref,
-    className: classNames('pgn__selectable_box-set', `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`, className),
+    name: name,
+    value: value,
+    defaultValue: defaultValue,
+    onChange: onChange,
+    ref: ref,
+    className: classNames('pgn__selectable_box-set', "pgn__selectable_box-set--".concat(columns || DEFAULT_COLUMNS_NUMBER), className),
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledby
   }, props), children);
@@ -75,7 +74,7 @@ SelectableBoxSet.propTypes = {
 };
 SelectableBoxSet.defaultProps = {
   children: undefined,
-  onChange: () => {},
+  onChange: function onChange() {},
   value: undefined,
   defaultValue: undefined,
   type: 'radio',

package/dist/SelectableBox/SelectableBoxSet.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectableBoxSet.js","names":["React","PropTypes","classNames","getInputType","requiredWhenNot","INPUT_TYPES","DEFAULT_COLUMNS_NUMBER","SelectableBoxSet","forwardRef","_ref","ref","children","name","value","defaultValue","onChange","type","columns","className","ariaLabel","ariaLabelledby","props","_objectWithoutProperties","_excluded","inputType","createElement","_objectSpread","propTypes","string","isRequired","node","func","oneOfType","number","array","oneOf","defaultProps","undefined"],"sources":["../../src/SelectableBox/SelectableBoxSet.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { getInputType } from './utils';\nimport { requiredWhenNot } from '../utils/propTypes';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst DEFAULT_COLUMNS_NUMBER = 2;\n\nconst SelectableBoxSet = React.forwardRef(({\n  children,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  type,\n  columns,\n  className,\n  ariaLabel,\n  ariaLabelledby,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBoxSet', type);\n\n  return React.createElement(\n    inputType,\n    {\n      name,\n      value,\n      defaultValue,\n      onChange,\n      ref,\n      className: classNames(\n        'pgn__selectable_box-set',\n        `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,\n        className,\n      ),\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      ...props,\n    },\n    children,\n  );\n});\n\nSelectableBoxSet.propTypes = {\n  /** Specifies a name for the group of `SelectableBox`'es. */\n  name: PropTypes.string.isRequired,\n  /** Content of the `SelectableBoxSet`. */\n  children: PropTypes.node,\n  /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */\n  onChange: PropTypes.func,\n  /** Indicates selected `SelectableBox`'es. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  /** Specifies default values for the `SelectableBox`'es. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /**\n   * Specifies number of `SelectableBox`'es in a row.\n   *\n   * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.\n   * Max number of columns: `12`.\n   */\n  columns: PropTypes.number,\n  /** A class that is be appended to the base element. */\n  className: PropTypes.string,\n  /**\n   * The ID of the label for the `SelectableBoxSet`.\n   *\n   * An accessible label must be provided to the `SelectableBoxSet`.\n   */\n  ariaLabelledby: PropTypes.string,\n  /**\n   * A label for the `SelectableBoxSet`.\n   *\n   * If not using `ariaLabelledby`, then `ariaLabel` must be provided */\n  ariaLabel: requiredWhenNot(PropTypes.string, 'ariaLabelledby'),\n};\n\nSelectableBoxSet.defaultProps = {\n  children: undefined,\n  onChange: () => {},\n  value: undefined,\n  defaultValue: undefined,\n  type: 'radio',\n  columns: DEFAULT_COLUMNS_NUMBER,\n  className: undefined,\n  ariaLabelledby: undefined,\n  ariaLabel: undefined,\n};\n\nexport default SelectableBoxSet;\n"],"mappings":";;;;;;;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,YAAY,QAAQ,SAAS;AACtC,SAASC,eAAe,QAAQ,oBAAoB;AAEpD,MAAMC,WAAW,GAAG,CAClB,OAAO,EACP,UAAU,CACX;AAED,MAAMC,sBAAsB,GAAG,CAAC;AAEhC,MAAMC,gBAAgB,gBAAGP,KAAK,CAACQ,UAAU,CAAC,CAAAC,IAAA,EAYvCC,GAAG,KAAK;EAAA,IAZgC;MACzCC,QAAQ;MACRC,IAAI;MACJC,KAAK;MACLC,YAAY;MACZC,QAAQ;MACRC,IAAI;MACJC,OAAO;MACPC,SAAS;MACTC,SAAS;MACTC;IAEF,CAAC,GAAAX,IAAA;IADIY,KAAK,GAAAC,wBAAA,CAAAb,IAAA,EAAAc,SAAA;EAER,MAAMC,SAAS,GAAGrB,YAAY,CAAC,kBAAkB,EAAEa,IAAI,CAAC;EAExD,oBAAOhB,KAAK,CAACyB,aAAa,CACxBD,SAAS,EAAAE,aAAA;IAEPd,IAAI;IACJC,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRL,GAAG;IACHQ,SAAS,EAAEhB,UAAU,CACnB,yBAAyB,EACxB,4BAA2Be,OAAO,IAAIX,sBAAuB,EAAC,EAC/DY,SACF,CAAC;IACD,YAAY,EAAEC,SAAS;IACvB,iBAAiB,EAAEC;EAAc,GAC9BC,KAAK,GAEVV,QACF,CAAC;AACH,CAAC,CAAC;AAEFJ,gBAAgB,CAACoB,SAAS,GAAG;EAC3B;EACAf,IAAI,EAAEX,SAAS,CAAC2B,MAAM,CAACC,UAAU;EACjC;EACAlB,QAAQ,EAAEV,SAAS,CAAC6B,IAAI;EACxB;EACAf,QAAQ,EAAEd,SAAS,CAAC8B,IAAI;EACxB;EACAlB,KAAK,EAAEZ,SAAS,CAAC+B,SAAS,CAAC,CAAC/B,SAAS,CAAC2B,MAAM,EAAE3B,SAAS,CAACgC,MAAM,EAAEhC,SAAS,CAACiC,KAAK,CAAC,CAAC;EACjF;EACApB,YAAY,EAAEb,SAAS,CAAC+B,SAAS,CAAC,CAAC/B,SAAS,CAAC2B,MAAM,EAAE3B,SAAS,CAACgC,MAAM,CAAC,CAAC;EACvE;EACAjB,IAAI,EAAEf,SAAS,CAACkC,KAAK,CAAC9B,WAAW,CAAC;EAClC;AACF;AACA;AACA;AACA;AACA;EACEY,OAAO,EAAEhB,SAAS,CAACgC,MAAM;EACzB;EACAf,SAAS,EAAEjB,SAAS,CAAC2B,MAAM;EAC3B;AACF;AACA;AACA;AACA;EACER,cAAc,EAAEnB,SAAS,CAAC2B,MAAM;EAChC;AACF;AACA;AACA;EACET,SAAS,EAAEf,eAAe,CAACH,SAAS,CAAC2B,MAAM,EAAE,gBAAgB;AAC/D,CAAC;AAEDrB,gBAAgB,CAAC6B,YAAY,GAAG;EAC9BzB,QAAQ,EAAE0B,SAAS;EACnBtB,QAAQ,EAAEA,CAAA,KAAM,CAAC,CAAC;EAClBF,KAAK,EAAEwB,SAAS;EAChBvB,YAAY,EAAEuB,SAAS;EACvBrB,IAAI,EAAE,OAAO;EACbC,OAAO,EAAEX,sBAAsB;EAC/BY,SAAS,EAAEmB,SAAS;EACpBjB,cAAc,EAAEiB,SAAS;EACzBlB,SAAS,EAAEkB;AACb,CAAC;AAED,eAAe9B,gBAAgB"}
+{"version":3,"file":"SelectableBoxSet.js","names":["React","PropTypes","classNames","getInputType","requiredWhenNot","INPUT_TYPES","DEFAULT_COLUMNS_NUMBER","SelectableBoxSet","forwardRef","_ref","ref","children","name","value","defaultValue","onChange","type","columns","className","ariaLabel","ariaLabelledby","props","_objectWithoutProperties","_excluded","inputType","createElement","_objectSpread","concat","propTypes","string","isRequired","node","func","oneOfType","number","array","oneOf","defaultProps","undefined"],"sources":["../../src/SelectableBox/SelectableBoxSet.jsx"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { getInputType } from './utils';\nimport { requiredWhenNot } from '../utils/propTypes';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst DEFAULT_COLUMNS_NUMBER = 2;\n\nconst SelectableBoxSet = React.forwardRef(({\n  children,\n  name,\n  value,\n  defaultValue,\n  onChange,\n  type,\n  columns,\n  className,\n  ariaLabel,\n  ariaLabelledby,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBoxSet', type);\n\n  return React.createElement(\n    inputType,\n    {\n      name,\n      value,\n      defaultValue,\n      onChange,\n      ref,\n      className: classNames(\n        'pgn__selectable_box-set',\n        `pgn__selectable_box-set--${columns || DEFAULT_COLUMNS_NUMBER}`,\n        className,\n      ),\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledby,\n      ...props,\n    },\n    children,\n  );\n});\n\nSelectableBoxSet.propTypes = {\n  /** Specifies a name for the group of `SelectableBox`'es. */\n  name: PropTypes.string.isRequired,\n  /** Content of the `SelectableBoxSet`. */\n  children: PropTypes.node,\n  /** A function that receives event of the clicked `SelectableBox` and can be used to handle the value change. */\n  onChange: PropTypes.func,\n  /** Indicates selected `SelectableBox`'es. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.array]),\n  /** Specifies default values for the `SelectableBox`'es. */\n  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /**\n   * Specifies number of `SelectableBox`'es in a row.\n   *\n   * Class that is responsible for the columns number: `pgn__selectable_box-set--{columns}`.\n   * Max number of columns: `12`.\n   */\n  columns: PropTypes.number,\n  /** A class that is be appended to the base element. */\n  className: PropTypes.string,\n  /**\n   * The ID of the label for the `SelectableBoxSet`.\n   *\n   * An accessible label must be provided to the `SelectableBoxSet`.\n   */\n  ariaLabelledby: PropTypes.string,\n  /**\n   * A label for the `SelectableBoxSet`.\n   *\n   * If not using `ariaLabelledby`, then `ariaLabel` must be provided */\n  ariaLabel: requiredWhenNot(PropTypes.string, 'ariaLabelledby'),\n};\n\nSelectableBoxSet.defaultProps = {\n  children: undefined,\n  onChange: () => {},\n  value: undefined,\n  defaultValue: undefined,\n  type: 'radio',\n  columns: DEFAULT_COLUMNS_NUMBER,\n  className: undefined,\n  ariaLabelledby: undefined,\n  ariaLabel: undefined,\n};\n\nexport default SelectableBoxSet;\n"],"mappings":"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"}

package/dist/SelectableBox/_variables.scss

@@ -0,0 +1,5 @@
+$selectable-box-padding:                   1rem !default;
+$selectable-box-border-radius:             .25rem !default;
+$selectable-box-space:                     .75rem !default;
+$min-cols-number:                          1 !default;
+$max-cols-number:                          12 !default;