@spaced-out/ui-design-system
Version:
Sense UI components library
612 lines (611 loc) • 26.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.TitleMedium = exports.SubTitleSmall = exports.SubTitleMedium = exports.SubTitleLarge = exports.SubTitleExtraSmall = exports.MenuTextSmall = exports.MenuTextMedium = exports.JumboSmall = exports.JumboMedium = exports.JumboLarge = exports.FormLabelSmall = exports.FormLabelMedium = exports.FormInputSmall = exports.FormInputMedium = exports.ButtonTextSmallUnderline = exports.ButtonTextSmall = exports.ButtonTextMediumUnderline = exports.ButtonTextMedium = exports.ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmall = exports.BodySmallBold = exports.BodySmall = exports.BodyMediumBold = exports.BodyMedium = exports.BodyLargeBold = exports.BodyLarge = void 0;
var React = _interopRequireWildcard(require("react"));
var _typography = require("../../types/typography");
var _classify = _interopRequireDefault(require("../../utils/classify"));
var _string = require("../../utils/string");
var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
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); }
const HighlightText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
let {
text,
highlight,
highlightClassName,
caseSensitiveHighlighting,
highlightWithBackground
} = _ref;
// Split text on highlight term, include term itself into parts, ignore case
// Convert highlight to an array if it's not already
const highlightArray = [].concat(highlight).filter(item => item !== '');
const highlights = highlightArray.map(_string.escapeRegExp).join('|');
const parts = text.split(new RegExp(`(${highlights})`, caseSensitiveHighlighting ? '' : 'gi')).filter(part => part !== '');
return /*#__PURE__*/React.createElement("span", {
ref: ref
}, parts.map((part, idx) => {
const isHighlighted = highlightArray.some(highlightTerm => caseSensitiveHighlighting ? (0, _string.escapeRegExp)(part).includes((0, _string.escapeRegExp)(highlightTerm)) : (0, _string.escapeRegExp)(part).toLowerCase().includes((0, _string.escapeRegExp)(highlightTerm).toLowerCase()));
return isHighlighted ? /*#__PURE__*/React.createElement("span", {
// eslint-disable-next-line react/no-array-index-key
key: idx,
className: (0, _classify.default)(_typographyModule.default.highlightText, {
[_typographyModule.default.bgHighlighting]: highlightWithBackground
}, highlightClassName)
}, part) : part;
}));
});
const JumboLarge = exports.JumboLarge = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref2;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.jumboLarge, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const JumboMedium = exports.JumboMedium = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref3;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const JumboSmall = exports.JumboSmall = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref4;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.jumboSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const TitleMedium = exports.TitleMedium = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref5;
return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const SubTitleLarge = exports.SubTitleLarge = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref6;
return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const SubTitleMedium = exports.SubTitleMedium = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref7;
return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const SubTitleSmall = exports.SubTitleSmall = /*#__PURE__*/React.forwardRef((_ref8, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref8;
return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const SubTitleExtraSmall = exports.SubTitleExtraSmall = /*#__PURE__*/React.forwardRef((_ref9, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref9;
return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextMedium = exports.ButtonTextMedium = /*#__PURE__*/React.forwardRef((_ref0, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref0;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextSmall = exports.ButtonTextSmall = /*#__PURE__*/React.forwardRef((_ref1, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref1;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const MenuTextMedium = exports.MenuTextMedium = /*#__PURE__*/React.forwardRef((_ref10, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref10;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.menuTextMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const MenuTextSmall = exports.MenuTextSmall = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref11;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.menuTextSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextExtraSmall = exports.ButtonTextExtraSmall = /*#__PURE__*/React.forwardRef((_ref12, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref12;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextMediumUnderline = exports.ButtonTextMediumUnderline = /*#__PURE__*/React.forwardRef((_ref13, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref13;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default.underline, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextSmallUnderline = exports.ButtonTextSmallUnderline = /*#__PURE__*/React.forwardRef((_ref14, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref14;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const ButtonTextExtraSmallUnderline = exports.ButtonTextExtraSmallUnderline = /*#__PURE__*/React.forwardRef((_ref15, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref15;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default.underline, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const FormInputMedium = exports.FormInputMedium = /*#__PURE__*/React.forwardRef((_ref16, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref16;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const FormInputSmall = exports.FormInputSmall = /*#__PURE__*/React.forwardRef((_ref17, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref17;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodyLarge = exports.BodyLarge = /*#__PURE__*/React.forwardRef((_ref18, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref18;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodyMedium = exports.BodyMedium = /*#__PURE__*/React.forwardRef((_ref19, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref19;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodySmall = exports.BodySmall = /*#__PURE__*/React.forwardRef((_ref20, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref20;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodyLargeBold = exports.BodyLargeBold = /*#__PURE__*/React.forwardRef((_ref21, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref21;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default.bold, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodyMediumBold = exports.BodyMediumBold = /*#__PURE__*/React.forwardRef((_ref22, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref22;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default.bold, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const BodySmallBold = exports.BodySmallBold = /*#__PURE__*/React.forwardRef((_ref23, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref23;
return /*#__PURE__*/React.createElement("p", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default.bold, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const FormLabelMedium = exports.FormLabelMedium = /*#__PURE__*/React.forwardRef((_ref24, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref24;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});
const FormLabelSmall = exports.FormLabelSmall = /*#__PURE__*/React.forwardRef((_ref25, ref) => {
let {
color = _typography.TEXT_COLORS.primary,
children,
className,
highlightedTextClassName,
highlightString,
caseSensitiveHighlighting,
highlightWithBackground,
...props
} = _ref25;
return /*#__PURE__*/React.createElement("span", _extends({}, props, {
className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className),
ref: ref
}), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
text: children,
highlight: highlightString,
caseSensitiveHighlighting: caseSensitiveHighlighting,
highlightClassName: highlightedTextClassName,
highlightWithBackground: highlightWithBackground
}) : children);
});