@royaloperahouse/chord 1.25.1-d-chord-development → 1.25.2-a-chord-development

package/dist/chord.cjs.development.js

@@ -2587,32 +2587,8 @@ var Progress = function Progress(_ref) {
 
 var _templateObject$d, _templateObject2$4, _templateObject3$3;
 var RadioContainer = /*#__PURE__*/styled__default.div(_templateObject$d || (_templateObject$d = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n"])));
-var RadioLine = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  gap: 20px;\n  justify-content: flex-start;\n  align-items: flex-start;\n  user-select: none;\n  cursor: ", ";\n  color: var(--base-color-", ");\n  ", ";\n\n  &:focus {\n    outline: none;\n  }\n\n  input[type='radio'] {\n    cursor: ", ";\n    color: var(--base-color-", ") !important;\n    accent-color: var(--base-color-", ") !important;\n    border-radius: 50%;\n    border: 1px solid;\n    border-color: var(--base-color-", ") !important;\n    transform: scale(1.8);\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-block-end: 4px;\n    margin-top: 6px;\n\n    :checked {\n      color: var(--base-color-black);\n      accent-color: var(--base-color-black);\n    }\n\n    &:focus {\n      outline: none;\n    }\n  }\n"])), function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref2) {
-  var darkMode = _ref2.darkMode;
-  return darkMode ? 'white' : 'black';
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled ? 'color: var(--base-color-mid-grey);' : '';
-}, function (_ref4) {
-  var disabled = _ref4.disabled;
-  return disabled ? 'not-allowed' : 'pointer';
-}, function (_ref5) {
-  var disabled = _ref5.disabled;
-  return disabled ? 'mid-grey' : 'black';
-}, function (_ref6) {
-  var darkMode = _ref6.darkMode;
-  return darkMode ? 'dark-grey' : 'black';
-}, function (_ref7) {
-  var disabled = _ref7.disabled;
-  return disabled ? 'mid-grey' : 'black';
-});
-var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-", ");\n"])), function (_ref8) {
-  var darkMode = _ref8.darkMode;
-  return darkMode ? 'white' : 'errorstate';
-});
+var RadioLine = /*#__PURE__*/styled__default.div(_templateObject2$4 || (_templateObject2$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: grid;\n  gap: 20px;\n  grid-template-columns: 1.15em 1fr;\n  user-select: none;\n  cursor: pointer;\n  color: black;\n\n  &:focus {\n    outline: none;\n  }\n\n  input[type='radio'] {\n    cursor: pointer;\n    appearance: none;\n    background-color: #ffffff00;\n    margin: 0;\n    color: black;\n    width: 20px;\n    height: 20px;\n    border: 1px solid black;\n    border-radius: 50%;\n    position: relative;\n    place-content: center;\n    display: block;\n  }\n\n  input[type='radio']::before {\n    content: '';\n    width: 10px;\n    height: 10px;\n    border-radius: 50%;\n    background-color: #ffffff00;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  input[type='radio']:checked::before {\n    background-color: black;\n  }\n"])));
+var RadioError = /*#__PURE__*/styled__default.div(_templateObject3$3 || (_templateObject3$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  color: var(--base-color-errorstate);\n"])));
 
 var _templateObject$e;
 var Wrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$e || (_templateObject$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  font-family: var(--font-family-", ");\n  font-feature-settings: var(--font-feature-settings-", ");\n  font-size: var(--font-size-", "-", ");\n  font-weight: var(--font-weight-", "-", ");\n  letter-spacing: var(--letter-spacing-", "-", ");\n  line-height: var(--line-height-", "-", ");\n  text-transform: var(--text-transform-", ");\n  word-break: var(--word-break-", ");\n  margin: var(--margin-", "-", ");\n"])), function (_ref) {
@@ -2731,10 +2707,6 @@ var Subtitle = function Subtitle(_ref6) {
 var Radio = function Radio(_ref) {
   var _ref$checked = _ref.checked,
       checked = _ref$checked === void 0 ? false : _ref$checked,
-      _ref$darkMode = _ref.darkMode,
-      darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       error = _ref.error,
       label = _ref.label,
       onChange = _ref.onChange;
@@ -2744,25 +2716,21 @@ var Radio = function Radio(_ref) {
       setChecked = _useState[1];
 
   var handleRadioChange = function handleRadioChange() {
-    if (!disabled) {
-      setChecked(!isChecked);
-      onChange == null ? void 0 : onChange(label != null ? label : '');
-    }
+    setChecked(!isChecked);
+    onChange == null ? void 0 : onChange(label != null ? label : '');
   };
 
   var handleKeyPress = function handleKeyPress(event) {
-    if (event.key === 'Space' || event.key === ' ' && !disabled) handleRadioChange();
+    if (event.key === 'Space' || event.key === ' ') handleRadioChange();
   };
 
   React.useEffect(function () {
     setChecked(checked);
   }, [onChange]);
   return /*#__PURE__*/React__default.createElement(RadioContainer, null, /*#__PURE__*/React__default.createElement(RadioLine, {
-    darkMode: darkMode,
     role: "radio",
     tabIndex: 0,
     onClick: handleRadioChange,
-    disabled: disabled,
     onKeyPress: handleKeyPress
   }, /*#__PURE__*/React__default.createElement("input", {
     type: "radio",
@@ -2770,9 +2738,7 @@ var Radio = function Radio(_ref) {
     readOnly: true
   }), /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
-  }, label)), error && /*#__PURE__*/React__default.createElement(RadioError, {
-    darkMode: darkMode
-  }, /*#__PURE__*/React__default.createElement(BodyText, {
+  }, label)), error && /*#__PURE__*/React__default.createElement(RadioError, null, /*#__PURE__*/React__default.createElement(BodyText, {
     level: 1
   }, error)));
 };
@@ -8101,8 +8067,6 @@ var RadioGroupContainer = /*#__PURE__*/styled__default.div(_templateObject$13 ||
 
 var RadioGroup = function RadioGroup(_ref) {
   var radios = _ref.radios,
-      _ref$darkMode = _ref.darkMode,
-      darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
       _ref$columnStartDeskt = _ref.columnStartDesktop,
       columnStartDesktop = _ref$columnStartDeskt === void 0 ? 1 : _ref$columnStartDeskt,
       _ref$columnStartDevic = _ref.columnStartDevice,
@@ -8144,13 +8108,9 @@ var RadioGroup = function RadioGroup(_ref) {
     columnStartSmallDevice: columnStartSmallDevice,
     columnSpanSmallDevice: columnSpanSmallDevice
   }, /*#__PURE__*/React__default.createElement(RadioGroupContainer, null, radioProps && radioProps.map(function (radio, i) {
-    var _radio$darkMode;
-
     return /*#__PURE__*/React__default.createElement(Radio, {
       checked: i === checkedIndex,
-      darkMode: (_radio$darkMode = radio.darkMode) != null ? _radio$darkMode : darkMode,
-      disabled: radio.disabled,
-      // error={radio.error} // Design for error state positioning for RadioGroup not available
+      // error={radio.error} // TO DO: Add error state - design not yet available
       label: radio.label,
       onChange: function onChange(e) {
         return handleChange(e, i);