@luscii-healthtech/web-ui 0.15.2 → 0.15.3

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

@@ -1,18 +1,4 @@
-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,6 +2033,10 @@ 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,7 +1828,6 @@ 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,10 +1924,11 @@ var Input = function Input(_ref) {
       "rounded-l border-l": withPrefix !== "",
       "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, {
-    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, {
+  }, withSuffix || withPrefix), icon && /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute transform -translate-y-1/2 top-1/2 left-4"
+  }, /*#__PURE__*/React__default.createElement(icon, {
+    className: "w-6 h-6 text-slate-300 "
+  })), /*#__PURE__*/React__default.createElement("input", Object.assign({}, otherProps, {
     "data-test-id": "input-component",
     name: name,
     value: innerValue,
@@ -1957,14 +1957,15 @@ var Input = function Input(_ref) {
       "order-2": withPrefix !== "",
       "order-1": withSuffix !== ""
     }, "shadow-default", className)
-  })), /*#__PURE__*/React__default.createElement(CrossIcon, {
-    transform: "translate(0, -12)",
-    className: classNames("absolute right-0 top-1/2", "w-6 h-6 mr-3 cursor-pointer text-slate-300", {
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: "absolute right-0 transform -translate-y-1/2 top-1/2"
+  }, /*#__PURE__*/React__default.createElement(CrossIcon, {
+    className: classNames("w-6 h-6 mr-3 cursor-pointer text-slate-300", {
       block: isClearIconVisible,
       hidden: !isClearIconVisible
     }),
     onClick: clearField
-  })));
+  }))));
 };
 
 var Line = function Line(_ref) {
@@ -4519,7 +4520,6 @@ 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",