@hero-design/rn-work-uikit 1.7.1 → 1.7.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hero-design/rn-work-uikit
 
+## 1.7.2
+
+### Patch Changes
+
+- [#4193](https://github.com/Thinkei/hero-design/pull/4193) [`84aabf6b98f5753616a8376ad5e5be4667d6dcb0`](https://github.com/Thinkei/hero-design/commit/84aabf6b98f5753616a8376ad5e5be4667d6dcb0) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] Update colors support dark mode
+
+- Updated dependencies [[`84aabf6b98f5753616a8376ad5e5be4667d6dcb0`](https://github.com/Thinkei/hero-design/commit/84aabf6b98f5753616a8376ad5e5be4667d6dcb0), [`d706fb127368ac597b0c8b1517650e64e39734ba`](https://github.com/Thinkei/hero-design/commit/d706fb127368ac597b0c8b1517650e64e39734ba), [`a2f2b9db429029f263278100365417e9b300d219`](https://github.com/Thinkei/hero-design/commit/a2f2b9db429029f263278100365417e9b300d219)]:
+  - @hero-design/rn@8.107.0
+
 ## 1.7.1
 
 ### Patch Changes

package/lib/index.js

@@ -6185,10 +6185,14 @@ var getCardTheme = function getCardTheme(theme) {
     "default": theme.radii.large,
     superRound: theme.radii.xxxlarge
   };
+  var space = {
+    dataCardContentPadding: theme.space.medium
+  };
   return {
     colors: colors,
     sizes: sizes,
-    radii: radii
+    radii: radii,
+    space: space
   };
 };
 
@@ -7211,7 +7215,7 @@ var getTextInputTheme$1 = function getTextInputTheme(theme) {
       "default": theme.colors.onDefaultGlobalSurface,
       error: theme.colors.onDefaultGlobalSurface,
       disabled: theme.colors.disabledOnDefaultGlobalSurface,
-      readonly: theme.colors.inactiveOnDefaultGlobalSurface,
+      readonly: theme.colors.mutedOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
     },
     labelsInsideTextInput: {
@@ -7228,7 +7232,13 @@ var getTextInputTheme$1 = function getTextInputTheme(theme) {
       readonly: theme.colors.inactiveOnDefaultGlobalSurface,
       filled: theme.colors.onDefaultGlobalSurface
     },
-    placeholder: theme.colors.mutedOnDefaultGlobalSurface
+    placeholder: {
+      "default": theme.colors.onDefaultGlobalSurface,
+      error: theme.colors.onDefaultGlobalSurface,
+      disabled: theme.colors.disabledOnDefaultGlobalSurface,
+      readonly: theme.colors.onDefaultGlobalSurface,
+      filled: theme.colors.onDefaultGlobalSurface
+    }
   };
   var space = {
     containerPadding: theme.space.medium,
@@ -7238,6 +7248,7 @@ var getTextInputTheme$1 = function getTextInputTheme(theme) {
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
     errorContainerMarginRight: theme.space.xsmall,
+    errorAndHelpTextContainerMarginTop: theme.space.xxsmall,
     errorMarginLeft: theme.space.xsmall,
     errorAndHelpTextContainerHorizontalPadding: theme.space.medium,
     containerMarginTop: theme.space.small,
@@ -10014,11 +10025,13 @@ var StyledErrorAndHelpTextContainer = index$c(reactNative.View)(function (_ref11
     paddingTop: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingTop
   };
 });
-var StyledErrorAndMaxLengthContainer = index$c(reactNative.View)(function () {
+var StyledErrorAndMaxLengthContainer = index$c(reactNative.View)(function (_ref12) {
+  var theme = _ref12.theme;
   return {
     flexDirection: 'row',
     justifyContent: 'space-between',
-    alignItems: 'flex-start'
+    alignItems: 'flex-start',
+    marginTop: theme.__hd__.textInput.space.errorAndHelpTextContainerMarginTop
   };
 });
 
@@ -10065,7 +10078,8 @@ var renderInput$1 = function renderInput(_ref3) {
     nativeInputProps = _ref3.nativeInputProps,
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
-    theme = _ref3.theme;
+    theme = _ref3.theme,
+    state = _ref3.state;
   var multiline = variant === 'textarea' || nativeInputProps.multiline;
   // `numberOfLines` must be `1` for single-line inputs to render properly on Android.
   var numberOfLines = multiline ? nativeInputProps.numberOfLines : 1;
@@ -10074,7 +10088,7 @@ var renderInput$1 = function renderInput(_ref3) {
     multiline: multiline,
     numberOfLines: numberOfLines,
     ref: ref,
-    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder[state]
   }));
 };
 var renderSuffix$1 = function renderSuffix(_ref4) {
@@ -10336,7 +10350,8 @@ var TextInput$1 = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
     },
-    theme: theme
+    theme: theme,
+    state: state
   })), renderSuffix$1({
     state: state,
     loading: loading,
@@ -16411,9 +16426,16 @@ var StyledDataCard = index$c(reactNative.View)(function (_ref) {
     backgroundColor: theme.__hd__.card.colors.dataCardBackground
   };
 });
-var Indicator = index$c(reactNative.View)(function (_ref2) {
-  var theme = _ref2.theme,
-    themeIntent = _ref2.themeIntent;
+var StyledDataCardContent = index$c(reactNative.View)(function (_ref2) {
+  var theme = _ref2.theme;
+  return {
+    backgroundColor: 'transparent',
+    padding: theme.__hd__.card.space.dataCardContentPadding
+  };
+});
+var Indicator = index$c(reactNative.View)(function (_ref3) {
+  var theme = _ref3.theme,
+    themeIntent = _ref3.themeIntent;
   return {
     backgroundColor: theme.__hd__.card.colors[themeIntent],
     width: theme.__hd__.card.sizes.indicatorWidth,
@@ -16458,7 +16480,8 @@ var Card = function Card(_ref) {
   }), children);
 };
 var Card$1 = Object.assign(Card, {
-  Data: DataCard
+  Data: DataCard,
+  DataContent: StyledDataCardContent
 });
 
 var StyledPageControl$2 = index$c(reactNative.View)(function () {
@@ -22585,14 +22608,34 @@ var index$8 = Object.assign(Drawer, {
   Dragable: DragableDrawer
 });
 
+var DEFAULT_ILLUSTRATION_SIZE = scale(72);
+
+var BaseSvg = function BaseSvg(_ref) {
+  var children = _ref.children,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$height,
+    viewBox = _ref.viewBox,
+    testID = _ref.testID;
+  var defaultViewBox = viewBox || "0 0 ".concat(DEFAULT_ILLUSTRATION_SIZE, " ").concat(DEFAULT_ILLUSTRATION_SIZE);
+  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
+    width: width,
+    height: height,
+    viewBox: defaultViewBox,
+    testID: testID
+  }, children);
+};
+
 var Add = function Add(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.100098",
@@ -22633,11 +22676,12 @@ var Add = function Add(_ref) {
 var Boom = function Boom(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: 74,
-    height: 79,
-    viewBox: "0 0 74 79",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Path, {
     d: "M17.762 51.247v12.16L2.996 41.693v-3.91l2.172-2.17h3.474l-.868-2.172-1.738-6.515 2.606-2.605 2.606-2.172-.434-6.514 4.343-1.303 3.908 1.303 3.475-2.606h4.343l6.514 9.989h-5.646c-3.33 9.265-9.989 27.882-9.989 28.229z",
@@ -22689,11 +22733,12 @@ var Boom = function Boom(_ref) {
 var Build = function Build(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.615723",
@@ -22730,11 +22775,12 @@ var Build = function Build(_ref) {
 var Clock = function Clock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.384277",
@@ -22764,17 +22810,18 @@ var Clock = function Clock(_ref) {
 var Confetti = function Confetti(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Defs, null, /*#__PURE__*/React__namespace.default.createElement(Svg.ClipPath, {
     id: "clip0_19647_1699"
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
-    width: "72",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white",
     transform: "translate(0.100098)"
   }))), /*#__PURE__*/React__namespace.default.createElement(Svg.G, {
@@ -22831,11 +22878,12 @@ var Confetti = function Confetti(_ref) {
 var Connections = function Connections(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "73",
-    viewBox: "0 0 72 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     y: "12.2122",
@@ -22878,17 +22926,18 @@ var Connections = function Connections(_ref) {
 var ErrorIcon = function ErrorIcon(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Defs, null, /*#__PURE__*/React__namespace.default.createElement(Svg.ClipPath, {
     id: "clip0_19647_1720"
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
-    width: "71.6316",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white"
   }))), /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     y: "11.3684",
@@ -22930,11 +22979,12 @@ var ErrorIcon = function ErrorIcon(_ref) {
 var Info = function Info(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.799805",
@@ -22962,11 +23012,12 @@ var Info = function Info(_ref) {
 var List = function List(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.199951",
@@ -22996,11 +23047,12 @@ var List = function List(_ref) {
 var Location = function Location(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.615723",
@@ -23030,11 +23082,12 @@ var Location = function Location(_ref) {
 var Merge = function Merge(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.100098",
@@ -23084,11 +23137,12 @@ var Merge = function Merge(_ref) {
 var Notifications = function Notifications(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "73",
-    viewBox: "0 0 72 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     y: "12.3684",
@@ -23108,11 +23162,12 @@ var Notifications = function Notifications(_ref) {
 var Search$1 = function Search(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     y: "11.3684",
@@ -23141,11 +23196,12 @@ var Search$1 = function Search(_ref) {
 var Star = function Star(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "73",
-    viewBox: "0 0 73 73",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.199951",
@@ -23175,11 +23231,12 @@ var Star = function Star(_ref) {
 var User = function User(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "73",
-    height: "72",
-    viewBox: "0 0 73 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     x: "0.799805",
@@ -23214,17 +23271,18 @@ var User = function User(_ref) {
 var Success$1 = function Success(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Defs, null, /*#__PURE__*/React__namespace.default.createElement(Svg.ClipPath, {
     id: "clip0_19647_1726"
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
-    width: "71.6316",
-    height: "72",
+    width: width,
+    height: height,
     fill: "white"
   }))), /*#__PURE__*/React__namespace.default.createElement(Svg.Rect, {
     y: "11.3684",
@@ -23253,11 +23311,12 @@ var Success$1 = function Success(_ref) {
 var Lock = function Lock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.G, {
     clipPath: "url(#clip0_21932_5671)"
@@ -23281,11 +23340,12 @@ var Lock = function Lock(_ref) {
 var Unlock = function Unlock(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.G, {
     clipPath: "url(#clip0_21932_5714)"
@@ -23309,11 +23369,12 @@ var Unlock = function Unlock(_ref) {
 var NoResult = function NoResult(_ref) {
   var stroke = _ref.stroke,
     fill = _ref.fill,
-    testID = _ref.testID;
-  return /*#__PURE__*/React__namespace.default.createElement(Svg__default.default, {
-    width: "72",
-    height: "72",
-    viewBox: "0 0 72 72",
+    testID = _ref.testID,
+    width = _ref.width,
+    height = _ref.height;
+  return /*#__PURE__*/React__namespace.default.createElement(BaseSvg, {
+    width: width,
+    height: height,
     testID: testID
   }, /*#__PURE__*/React__namespace.default.createElement(Svg.G, {
     clipPath: "url(#clip0_21888_4920)"
@@ -23337,7 +23398,7 @@ var NoResult = function NoResult(_ref) {
   }))));
 };
 
-var StatusIcons = {
+var Illustrations = {
   add: Add,
   boom: Boom,
   build: Build,
@@ -23358,16 +23419,32 @@ var StatusIcons = {
   unlock: Unlock,
   'no-result': NoResult
 };
-var StatusIcon = function StatusIcon(_ref) {
-  var icon = _ref.icon,
-    testID = _ref.testID;
-  var Icon = StatusIcons[icon];
+var IllustrationList = Object.keys(Illustrations);
+
+var Illustration = function Illustration(_ref) {
+  var name = _ref.name,
+    testID = _ref.testID,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$width,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? DEFAULT_ILLUSTRATION_SIZE : _ref$height,
+    style = _ref.style;
+  var IllustrationComponent = Illustrations[name];
   var theme = useTheme();
-  return Icon && /*#__PURE__*/React__namespace.default.createElement(Icon, {
-    stroke: theme.colors.primary,
-    fill: theme.colors.decorativeSecondarySurface,
+  var defaultStroke = theme.colors.primary;
+  var defaultFill = theme.colors.decorativeSecondarySurface;
+  if (!IllustrationComponent) {
+    return null;
+  }
+  return /*#__PURE__*/React__namespace.default.createElement(Box, {
+    style: style
+  }, /*#__PURE__*/React__namespace.default.createElement(IllustrationComponent, {
+    stroke: defaultStroke,
+    fill: defaultFill,
+    width: width,
+    height: height,
     testID: testID
-  });
+  }));
 };
 
 var StyledWrapper$7 = index$c(reactNative.View)(function (_ref) {
@@ -23409,8 +23486,8 @@ var renderImageOrIcon$2 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledEmptyImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__namespace.default.createElement(StyledEmptyImageContainer, null, /*#__PURE__*/React__namespace.default.createElement(Illustration, {
+      name: icon,
       testID: "empty-icon"
     }));
   }
@@ -23886,8 +23963,8 @@ var renderImageOrIcon$1 = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__namespace.default.createElement(StyledErrorIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(Illustration, {
+      name: icon,
       testID: "error-icon"
     }));
   }
@@ -26450,8 +26527,8 @@ var renderImageOrIcon = function renderImageOrIcon(_ref) {
   var image = _ref.image,
     icon = _ref.icon;
   if (icon) {
-    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(StatusIcon, {
-      icon: icon,
+    return /*#__PURE__*/React__namespace.default.createElement(StyledSuccessIconContainer, null, /*#__PURE__*/React__namespace.default.createElement(Illustration, {
+      name: icon,
       testID: "success-icon"
     }));
   }
@@ -47583,7 +47660,7 @@ var SearchOneLine = /*#__PURE__*/React.forwardRef(function (props, ref) {
       value: value,
       defaultValue: defaultValue,
       placeholder: placeholder,
-      placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+      placeholderTextColor: theme.__hd__.textInput.colors.placeholder[state]
     }),
     ref: function ref(rnTextInputRef) {
       innerTextInput.current = rnTextInputRef;
@@ -48551,7 +48628,8 @@ var PrefixComponent$1 = /*#__PURE__*/React__namespace.default.memo(PrefixCompone
 
 var DefaultTextInput = /*#__PURE__*/React__namespace.default.forwardRef(function (_ref, ref) {
   var variant = _ref.variant,
-    nativeInputProps = _ref.nativeInputProps;
+    nativeInputProps = _ref.nativeInputProps,
+    state = _ref.state;
   var theme = useWorkTheme();
   var inputRef = React.useRef(null);
   React.useImperativeHandle(ref, function () {
@@ -48583,7 +48661,7 @@ var DefaultTextInput = /*#__PURE__*/React__namespace.default.forwardRef(function
     themeVariant: variant,
     multiline: variant === 'textarea' || nativeInputProps.multiline,
     ref: inputRef,
-    placeholderTextColor: theme.__hd__.textInput.colors.placeholder
+    placeholderTextColor: theme.__hd__.textInput.colors.placeholder[state]
   }));
 });
 /**
@@ -48611,14 +48689,16 @@ var DefaultTextInput = /*#__PURE__*/React__namespace.default.forwardRef(function
 var InputComponent = /*#__PURE__*/React__namespace.default.forwardRef(function (_ref2, ref) {
   var variant = _ref2.variant,
     nativeInputProps = _ref2.nativeInputProps,
-    renderInputValue = _ref2.renderInputValue;
+    renderInputValue = _ref2.renderInputValue,
+    state = _ref2.state;
   if (renderInputValue) {
     return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, renderInputValue(_objectSpread2({}, nativeInputProps), ref));
   }
   return /*#__PURE__*/React__namespace.default.createElement(DefaultTextInput, {
     variant: variant,
     nativeInputProps: nativeInputProps,
-    ref: ref
+    ref: ref,
+    state: state
   });
 });
 InputComponent.displayName = 'InputComponent';
@@ -48693,7 +48773,8 @@ var InputRow = /*#__PURE__*/React__namespace.default.forwardRef(function (_ref,
       onBlur: handleBlur
     }),
     renderInputValue: renderInputValue,
-    ref: ref
+    ref: ref,
+    state: state
   })));
 });
 
@@ -68364,6 +68445,8 @@ exports.FloatingIsland = FloatingIsland;
 exports.FormGroup = FormGroup;
 exports.HeroDesignProvider = HeroDesignProvider;
 exports.Icon = Icon;
+exports.Illustration = Illustration;
+exports.IllustrationList = IllustrationList;
 exports.Image = Image;
 exports.List = List$1;
 exports.LocaleProvider = LocaleProvider;