opus-toolkit-components 1.4.9 → 1.5.0

package/lib/opus-components.main.js

@@ -802,50 +802,51 @@ const getDataCy = function () {
   return name || '';
 };
 ;// ./src/components/Text/Text.jsx
-const _excluded = ["variant", "as", "className", "children", "name", "dataCy"];
+const _excluded = ["variant", "as", "className", "color", "children", "name", "dataCy"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 
 
 const variantMap = {
-  h1: 'text-4xl font-bold leading-tight text-[--color-text-strong]',
-  h2: 'text-3xl leading-snug text-[--color-text-strong]',
-  h3: 'text-2xl font-semibold leading-snug text-[--color-text-strong]',
-  h4: 'text-xl font-medium text-[--color-text-strong]',
-  h5: 'text-lg font-medium text-[--color-text-strong]',
-  h6: 'text-base font-medium text-[--color-text-strong]',
-  body: 'text-base text-[--color-text-strong]',
-  small: 'text-sm text-[--color-text-strong]',
-  caption: 'text-xs text-[--color-text-strong]',
-  label: 'text-md text-[--color-text-weak]'
+  h1: "text-4xl font-bold leading-tight",
+  h2: "text-3xl leading-snug",
+  h3: "text-2xl font-semibold leading-snug",
+  h4: "text-xl font-medium",
+  h5: "text-lg font-medium",
+  h6: "text-base font-medium",
+  body: "text-base",
+  small: "text-sm",
+  caption: "text-xs",
+  label: "text-md"
 };
 const elementMap = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  body: 'p',
-  small: 'small',
-  caption: 'span',
-  label: 'label'
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  body: "p",
+  small: "small",
+  caption: "span",
+  label: "label"
 };
 function Text(_ref) {
   let {
-      variant = 'body',
+      variant = "body",
       as,
-      className = '',
+      className = "",
+      color = "text-[--color-text-strong]",
       children,
       name,
       dataCy
     } = _ref,
     rest = _objectWithoutProperties(_ref, _excluded);
-  const Component = as || elementMap[variant] || 'p';
+  const Component = as || elementMap[variant] || "p";
   const variantClass = variantMap[variant] || variantMap.body;
   return /*#__PURE__*/external_react_default().createElement(Component, _extends({
-    className: "".concat(variantClass, " ").concat(className),
+    className: "".concat(variantClass, " ").concat(color, " ").concat(className),
     "data-cy": getDataCy({
       name,
       dataCy
@@ -4121,24 +4122,24 @@ const RadioButton = _ref => {
   let {
     label,
     options = [{
-      value: 'single',
-      label: 'Single'
+      value: "single",
+      label: "Single"
     }, {
-      value: 'married',
-      label: 'Married / Living with Partner'
+      value: "married",
+      label: "Married / Living with Partner"
     }, {
-      value: 'divorced',
-      label: 'Divorced'
+      value: "divorced",
+      label: "Divorced"
     }, {
-      value: 'other',
-      label: 'Other'
+      value: "other",
+      label: "Other"
     }],
     name,
     value,
     onChange,
-    className = '',
-    tabIndex = '',
-    title = '',
+    className = "",
+    tabIndex = "",
+    title = "",
     isValid = true,
     errorMessage = "".concat(label, " is required"),
     required = false,
@@ -4157,15 +4158,15 @@ const RadioButton = _ref => {
     onChange === null || onChange === void 0 || onChange(event);
   };
   return /*#__PURE__*/external_react_default().createElement("div", {
-    className: "flex flex-col mb-4 ".concat(className)
+    className: "mb-4 flex flex-col ".concat(className)
   }, /*#__PURE__*/external_react_default().createElement(Text, {
     as: "label",
     variant: "label",
-    className: "text-[--color-text-strong] mb-2 flex items-center"
+    className: "mb-2 flex items-center text-[--color-text-strong]"
   }, label, required && /*#__PURE__*/external_react_default().createElement(Text, {
     as: "span",
     variant: "small",
-    className: "text-[--color-util-red] ml-1"
+    className: "ml-1 text-[--color-util-red]"
   }, "*")), /*#__PURE__*/external_react_default().createElement("div", {
     className: "flex flex-wrap gap-4 md:flex-nowrap md:gap-0 md:space-x-4"
   }, options.map(option => {
@@ -4173,7 +4174,7 @@ const RadioButton = _ref => {
     return /*#__PURE__*/external_react_default().createElement("label", {
       key: option.value,
       htmlFor: id,
-      className: "py-2 px-4 mb-1 text-center whitespace-break-spaces border hover:border-[--color-primary-btn] rounded-lg transition duration-200 flex items-center  ".concat(selectedValue === option.value ? 'bg-[--color-primary-btn] text-[--color-white] border-[--color-stroke]' : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === '' ? 'border-[--color-util-red]' : 'border-[--color-stroke]'), " ").concat(disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer')
+      className: "mb-1 flex items-center whitespace-break-spaces rounded-lg border px-4 py-2 text-center transition duration-200 hover:border-[--color-primary-btn] ".concat(selectedValue === option.value ? "border-[--color-stroke] bg-[--color-primary-btn] text-[--color-white]" : "bg-[--color-input-bg] text-[--color-text-strong] ".concat(!isValid && selectedValue === "" ? "border-[--color-util-red]" : "border-[--color-stroke]"), " ").concat(disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer")
     }, /*#__PURE__*/external_react_default().createElement("input", {
       id: id,
       type: "radio",
@@ -4199,7 +4200,7 @@ const RadioButton = _ref => {
     className: "text-[--color-util-red]"
   }, errorMessage));
 };
-RadioButton.displayName = 'RadioButton';
+RadioButton.displayName = "RadioButton";
 /* harmony default export */ const Radios_RadioButton = (RadioButton);
 ;// ./src/components/Forms/Checkbox/Checkbox.jsx