@luscii-healthtech/web-ui 0.15.1 → 0.15.2

package/dist/components/Icons/types/IconProps.type.d.ts

@@ -1,4 +1,18 @@
+import React from "react";
 export interface IconProps {
     className?: string;
     onClick?: () => void;
+    /**
+     * The trick to a perfectly center item is to make it translate in -half its dimensions.
+     * Because IE11 doesn't support translating SVG elements in CSS, we need to tap into the
+     * attribute from the SVG itself to do that.
+     *
+     * We can make it dynamic with `ref` and javascript but for now this is good enough.
+     *
+     * Assuming `20` is the rendered component height:
+     *
+     * @example <SVGIconComponent className="absolute top-1/2" transform="translate(0, -20)" />
+     *
+     */
+    transform?: React.SVGAttributes<SVGSVGElement>["transform"];
 }

package/dist/web-ui-tailwind.css

@@ -2033,10 +2033,6 @@ video {
   --transform-translate-x: -50%;
 }
 
-.-translate-y-1\/2 {
-  --transform-translate-y: -50%;
-}
-
 .transition-all {
   transition-property: all;
 }

package/dist/web-ui.cjs.development.js

@@ -1828,6 +1828,7 @@ var CrossIcon = function CrossIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
     onClick: props.onClick,
+    transform: props.transform,
     role: props.onClick ? "button" : undefined,
     width: "24",
     height: "24",
@@ -1925,7 +1926,8 @@ var Input = function Input(_ref) {
       "rounded-r border-r": withSuffix !== ""
     }, "border-t border-b border-solid border-input-border", "flex flex-col items-center p-3", "text-sm", "text-slate-500", "bg-main-background")
   }, withSuffix || withPrefix), icon && /*#__PURE__*/React__default.createElement(icon, {
-    className: "w-6 h-6 transform top-1/2 -translate-y-1/2 left-4 text-slate-300 absolute"
+    transform: "translate(0, -12)",
+    className: "w-6 h-6 top-1/2 left-4 text-slate-300 absolute"
   }), /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
     "data-test-id": "input-component",
     name: name,
@@ -1956,7 +1958,8 @@ var Input = function Input(_ref) {
       "order-1": withSuffix !== ""
     }, "shadow-default", className)
   })), /*#__PURE__*/React__default.createElement(CrossIcon, {
-    className: classNames("absolute right-0 transform top-1/2 h-5 w-5", "-translate-y-1/2 w-6 h-6 mr-3  cursor-pointer text-slate-300", {
+    transform: "translate(0, -12)",
+    className: classNames("absolute right-0 top-1/2", "w-6 h-6 mr-3 cursor-pointer text-slate-300", {
       block: isClearIconVisible,
       hidden: !isClearIconVisible
     }),
@@ -3561,7 +3564,7 @@ var PreviewPhone = function PreviewPhone(_ref) {
   }))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
 };
 
-var css_248z$i = ".cweb-radio {\n  outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n  margin-left: 8px;\n  -ms-user-select: none;\n      user-select: none;\n  text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-radio .cweb-radio-icon-container {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  border: 1px solid #cccccc;\n  border-radius: 50%;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-radio .cweb-radio-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: block;\n}\n\n.cweb-radio.is-focused .cweb-radio-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n  width: 5px;\n  height: 5px;\n  background-color: #ffffff;\n  border-radius: 50%;\n}\n";
+var css_248z$i = ".cweb-radio {\n  outline: none;\n}\n\n.cweb-radio .cweb-radio-input {\n  -webkit-appearance: none;\n  height: 1px;\n  opacity: 0;\n  width: 1px;\n}\n\n.cweb-radio .cweb-radio-label-text {\n  margin-left: 8px;\n  -ms-user-select: none;\n  user-select: none;\n  text-align: left;\n}\n\n.cweb-radio .cweb-radio-label {\n  display: flex;\n  align-items: center;\n  margin-bottom: 0;\n}\n\n.cweb-radio .cweb-radio-icon-container {\n  width: 16px;\n  height: 16px;\n  position: relative;\n  border: 1px solid #cccccc;\n  border-radius: 50%;\n  transition: background-color 0.3s ease-in-out;\n}\n\n.cweb-radio .cweb-radio-icon {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  display: block;\n}\n\n.cweb-radio.is-focused .cweb-radio-icon-container {\n  border-color: #0074dd;\n}\n\n.cweb-radio.is-checked .cweb-radio-icon {\n  width: 5px;\n  height: 5px;\n  background-color: #ffffff;\n  border-radius: 50%;\n}\n";
 styleInject(css_248z$i);
 
 var Radio = /*#__PURE__*/function (_PureComponent) {
@@ -4516,6 +4519,7 @@ var SearchIcon = function SearchIcon(props) {
   return /*#__PURE__*/React__default.createElement("svg", {
     className: props.className,
     onClick: props.onClick,
+    transform: props.transform,
     role: props.onClick ? "button" : undefined,
     width: "24",
     height: "24",