@thecb/components 7.3.2-beta.1 → 7.3.2-beta.3

package/dist/index.cjs.js

@@ -16055,6 +16055,45 @@ var ProfileImage = function ProfileImage() {
   }));
 };
 
+var FindIconSmall = function FindIconSmall(_ref) {
+  var themeValues = _ref.themeValues;
+  return /*#__PURE__*/React__default.createElement("svg", {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: themeValues.singleIconColor
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: "mask0_0_1287",
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "2",
+    y: "2",
+    width: "15",
+    height: "14"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11.4142 4.34313C13.1295 6.05839 13.338 8.70983 12.0397 10.6527L15.9968 14.6098C16.1921 14.805 16.1921 15.1216 15.9968 15.3169L15.4665 15.8472C15.2712 16.0425 14.9546 16.0425 14.7594 15.8472L10.8287 11.9165C8.87269 13.3493 6.1108 13.1818 4.34315 11.4142C2.39053 9.46157 2.39053 6.29575 4.34315 4.34313C6.29577 2.39051 9.4616 2.39051 11.4142 4.34313ZM10.4246 10.4246C11.7915 9.05777 11.7915 6.84169 10.4246 5.47486C9.05779 4.10802 6.84171 4.10802 5.47488 5.47486C4.10804 6.84169 4.10804 9.05777 5.47488 10.4246C6.84171 11.7914 9.05779 11.7914 10.4246 10.4246Z",
+    fill: "white"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: "url(#mask0_0_1287)"
+  }, /*#__PURE__*/React__default.createElement("rect", {
+    width: "20",
+    height: "20",
+    fill: themeValues.singleIconColor
+  })));
+};
+
+var FindIconSmall$1 = themeComponent(FindIconSmall, "Icons", fallbackValues$2, "primary");
+
 var color$2 = "#15749D";
 var hoverColor$1 = "#116285";
 var activeColor$1 = "#0E506D";
@@ -24630,6 +24669,64 @@ var ProcessingFee = function ProcessingFee(_ref) {
 
 var ProcessingFee$1 = themeComponent(ProcessingFee, "ProcessingFee", fallbackValues$r, "default");
 
+
+
+var index$5 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  colors: colors,
+  fontWeights: style_constants
+});
+
+var HiddenRadioInput = styled__default.input.withConfig({
+  displayName: "RadioButtonWithLabel__HiddenRadioInput",
+  componentId: "sc-1m9whwg-0"
+})(["position:absolute;opacity:0;margin:0;"]);
+var Circle = styled__default.div.withConfig({
+  displayName: "RadioButtonWithLabel__Circle",
+  componentId: "sc-1m9whwg-1"
+})(["flex-shrink:0;margin-right:8px;width:1.5rem;height 1.5rem;border:1px solid ", ";border-radius:50%;box-sizing:border-box;padding:2px;:after{content:\"\";width:100%;height:100%;display:block;background:", ";border-radius:50%;transform:scale(0);}"], GREY_CHATEAU, MATISSE_BLUE);
+var InputAndLabelContainer = styled__default(Cluster).withConfig({
+  displayName: "RadioButtonWithLabel__InputAndLabelContainer",
+  componentId: "sc-1m9whwg-2"
+})(["overflow:visible;", ":checked + label ", ":after{transform:scale(0.85);transition:transform 0.15s;}", ":checked + label ", "{border:1px solid ", ";}", ":focus + label ", "{{box-shadow:0px 0px 2px 1px ", ";}"], HiddenRadioInput, Circle, HiddenRadioInput, Circle, MATISSE_BLUE, HiddenRadioInput, Circle, MATISSE_BLUE);
+
+var RadioButtonWithLabel = function RadioButtonWithLabel(_ref) {
+  var _ref$id = _ref.id,
+      id = _ref$id === void 0 ? "" : _ref$id,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? "" : _ref$value,
+      _ref$labelText = _ref.labelText,
+      labelText = _ref$labelText === void 0 ? "" : _ref$labelText,
+      groupName = _ref.groupName,
+      setValue = _ref.setValue,
+      ariaInvalid = _ref.ariaInvalid,
+      index = _ref.index,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange;
+  return /*#__PURE__*/React__default.createElement(InputAndLabelContainer, {
+    align: "center",
+    childGap: "0.5rem"
+  }, /*#__PURE__*/React__default.createElement(HiddenRadioInput, {
+    "aria-invalid": ariaInvalid,
+    style: {
+      marginTop: 0
+    },
+    type: "radio",
+    name: groupName,
+    id: id,
+    value: value,
+    onChange: function onChange(e) {
+      setValue(e.target.value);
+      handleChange(e);
+    },
+    defaultChecked: index === 0
+  }), /*#__PURE__*/React__default.createElement(Text$1, {
+    as: "label",
+    htmlFor: id,
+    extraStyles: "\n          font-size: 1rem;\n          display: flex; \n          width: 100%;\n          :hover {\n            cursor: pointer;\n          }\n        "
+  }, /*#__PURE__*/React__default.createElement(Circle, null), labelText));
+};
+
 var activeColor$5 = "".concat(MATISSE_BLUE);
 var inactiveColor = "".concat(GREY_CHATEAU);
 var fallbackValues$s = {
@@ -24639,7 +24736,7 @@ var fallbackValues$s = {
 
 var HiddenRadioButton = styled__default.input.withConfig({
   displayName: "RadioButton__HiddenRadioButton",
-  componentId: "sc-v6hie9-0"
+  componentId: "sc-1jed2i-0"
 })(["opacity:0;position:absolute;cursor:", ";"], function (_ref) {
   var disabled = _ref.disabled;
   return disabled ? "auto" : "pointer";
@@ -35843,14 +35940,6 @@ var NavTabs = function NavTabs(_ref) {
   }, tabs)));
 };
 
-
-
-var index$5 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  colors: colors,
-  fontWeights: style_constants
-});
-
 var shineFrames = styled.keyframes(["{0{background-position:0 0;}20%{background-position:100% 100%;}100%{background-position:100% 100%;}}"]);
 var LoadingPill = styled__default.div.withConfig({
   displayName: "LoadingPillstyled__LoadingPill",
@@ -46274,6 +46363,55 @@ PhoneForm.reducer = reducer$9;
 PhoneForm.mapStateToProps = mapStateToProps$a;
 PhoneForm.mapDispatchToProps = mapDispatchToProps$9;
 
+var DefaultHeading = styled__default.div.withConfig({
+  displayName: "RadioGroup__DefaultHeading",
+  componentId: "sc-7lqrl8-0"
+})(["font-size:0.875rem;color:", " margin:0;padding:8px 0px;"], CHARADE_GREY);
+var StyledFieldset = styled__default.fieldset.withConfig({
+  displayName: "RadioGroup__StyledFieldset",
+  componentId: "sc-7lqrl8-1"
+})(["", ""], function (props) {
+  return props.$extraStyles;
+});
+
+var RadioGroup = function RadioGroup(_ref) {
+  var headingText = _ref.headingText,
+      groupName = _ref.groupName,
+      _ref$heading = _ref.heading,
+      Heading = _ref$heading === void 0 ? /*#__PURE__*/React__default.createElement(DefaultHeading, {
+    role: "heading",
+    id: "radio-group-".concat(groupName, "-heading")
+  }, headingText) : _ref$heading,
+      config = _ref.config,
+      extraStyles = _ref.extraStyles,
+      _ref$handleChange = _ref.handleChange,
+      handleChange = _ref$handleChange === void 0 ? noop : _ref$handleChange,
+      field = _ref.field,
+      fieldActions = _ref.fieldActions;
+
+  var setValue = function setValue(value) {
+    return fieldActions.set(value);
+  };
+
+  return /*#__PURE__*/React__default.createElement(StyledFieldset, {
+    role: "radiogroup",
+    "aria-labelledby": "radio-group-".concat(groupName, "-heading"),
+    $extraStyles: extraStyles
+  }, Heading !== null && Heading, /*#__PURE__*/React__default.createElement(Stack, {
+    childGap: "4px"
+  }, config.map(function (c, idx) {
+    return /*#__PURE__*/React__default.createElement(RadioButtonWithLabel, _extends({
+      index: idx,
+      key: c.id
+    }, c, {
+      groupName: groupName,
+      setValue: setValue,
+      handleChange: handleChange,
+      "aria-invalid": field.dirty && field.hasErrors || field.hasErrors && showErrors
+    }));
+  })));
+};
+
 var headingBackgroundColor$1 = "".concat(WHITE);
 var headingDisabledColor = "".concat(ATHENS_GREY);
 var bodyBackgroundColor$1 = "#eeeeee";
@@ -47185,19 +47323,20 @@ var WorkflowTile = function WorkflowTile(_ref) {
     color: STORM_GREY
   }, workflowDescription)), /*#__PURE__*/React__default.createElement(Box, {
     padding: "1.5rem 1rem",
-    background: GRECIAN_GREY
+    background: ATHENS_GREY,
+    borderColor: GRECIAN_GREY,
+    borderWidthOverride: "2px 0 0 0"
   }, /*#__PURE__*/React__default.createElement(ButtonWithLink, {
     variant: buttonVariant,
     primary: buttonVariant == "primary",
     primaryBG: MATISSE_BLUE,
     fontWeight: FONT_WEIGHT_SEMIBOLD,
     fontSize: "1.125rem",
-    borderRadius: "0px",
     text: workflowActionName,
     minWidth: "100%",
     url: "/service/".concat(slug),
-    extraStyles: "width: 100%;",
-    linkExtraStyles: "justify-content: center;",
+    extraStyles: "width: 100%; margin: 0;",
+    linkExtraStyles: "justify-content: center",
     dataQa: slug
   }))));
 };
@@ -47518,6 +47657,7 @@ exports.ErroredIcon = ErroredIcon;
 exports.ExternalLink = ExternalLink;
 exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.FailedIcon = FailedIcon;
+exports.FindIconSmall = FindIconSmall$1;
 exports.FooterWithSubfooter = FooterWithSubfooter$1;
 exports.ForgotPasswordForm = ForgotPasswordForm;
 exports.ForgotPasswordIcon = ForgotPasswordIcon$1;
@@ -47588,6 +47728,8 @@ exports.ProfileImage = ProfileImage;
 exports.PropertiesAddIcon = PropertiesAddIcon$1;
 exports.PropertiesIconSmall = PropertiesIconSmall$1;
 exports.RadioButton = RadioButton$2;
+exports.RadioButtonWithLabel = RadioButtonWithLabel;
+exports.RadioGroup = RadioGroup;
 exports.RadioSection = RadioSection$1;
 exports.Reel = Reel;
 exports.RefundIcon = RefundIcon;