@x-plat/design-system 0.8.2 → 0.9.0

package/dist/components/index.css

@@ -1435,6 +1435,44 @@
   color: var(--semantic-text-error);
 }
 
+/* src/components/FieldMessage/fieldMessage.scss */
+.lib-xplat-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-space-2);
+}
+.lib-xplat-field-message-wrap {
+  display: flex;
+  gap: var(--spacing-space-2);
+  margin-left: var(--spacing-space-1);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message {
+  display: flex;
+  gap: var(--spacing-space-1);
+  font-family: var(--semantic-typo-caption-2-r-font);
+  font-size: var(--semantic-typo-caption-2-r-size);
+  line-height: var(--semantic-typo-caption-2-r-lh);
+  font-weight: var(--semantic-typo-caption-2-r-weight);
+  letter-spacing: var(--semantic-typo-caption-2-r-ls);
+  align-items: center;
+  user-select: none;
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.default {
+  color: var(--semantic-icon-secondary);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.success {
+  color: var(--semantic-text-success);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.warning {
+  color: var(--semantic-text-warning);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message.error {
+  color: var(--semantic-text-error);
+}
+.lib-xplat-field-message-wrap > .lib-xplat-field-message > .icon {
+  font-size: var(--semantic-typo-label-2-m-size);
+}
+
 /* src/components/AutoResizeTextArea/autoResizeTextArea.scss */
 .lib-xplat-auto-resize-textarea-wrapper {
   display: flex;
@@ -1461,9 +1499,6 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea:has(> textarea:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-tertiary);
-}
 .lib-xplat-auto-resize-textarea-wrapper .lib-xplat-auto-resize-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;
@@ -2640,9 +2675,6 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.lib-xplat-input-wrap .lib-xplat-input:has(> input:not(:placeholder-shown)):not(:focus-within) {
-  border-color: var(--semantic-border-tertiary);
-}
 .lib-xplat-input-wrap .lib-xplat-input.sm {
   height: var(--spacing-control-height-sm);
   font-family: var(--semantic-typo-caption-1-r-font);
@@ -2699,37 +2731,6 @@
 .lib-xplat-input-wrap .lib-xplat-input > .suffix > .wrapper.pointer {
   cursor: pointer;
 }
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap {
-  display: flex;
-  gap: var(--spacing-space-2);
-  margin-left: var(--spacing-space-1);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation {
-  display: flex;
-  gap: var(--spacing-space-1);
-  font-family: var(--semantic-typo-caption-2-r-font);
-  font-size: var(--semantic-typo-caption-2-r-size);
-  line-height: var(--semantic-typo-caption-2-r-lh);
-  font-weight: var(--semantic-typo-caption-2-r-weight);
-  letter-spacing: var(--semantic-typo-caption-2-r-ls);
-  align-items: center;
-  user-select: none;
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.default {
-  color: var(--semantic-icon-secondary);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.success {
-  color: var(--semantic-text-success);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.warning {
-  color: var(--semantic-text-warning);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation.error {
-  color: var(--semantic-text-error);
-}
-.lib-xplat-input-wrap .lib-xplat-input-validation-wrap > .lib-xplat-input-validation > .icon {
-  font-size: var(--semantic-typo-label-2-m-size);
-}
 
 /* src/components/Modal/modal.scss */
 .lib-xplat-modal {
@@ -5271,9 +5272,6 @@
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.lib-xplat-textarea-wrap .lib-xplat-textarea:not(:placeholder-shown):not(:focus) {
-  border-color: var(--semantic-border-tertiary);
-}
 .lib-xplat-textarea-wrap .lib-xplat-textarea.disabled {
   background-color: var(--semantic-surface-neutral-disabled);
   cursor: not-allowed;

package/dist/components/index.d.cts

@@ -17,6 +17,7 @@ export { Drawer } from './Drawer/index.cjs';
 export { Dropdown } from './Dropdown/index.cjs';
 export { default as Editor, EditorProps, EditorToolbarItem } from './Editor/index.cjs';
 export { EmptyState } from './EmptyState/index.cjs';
+export { Field, FieldMessage, hasError } from './FieldMessage/index.cjs';
 export { FileUpload } from './FileUpload/index.cjs';
 export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter } from './HtmlTypeWriter/index.cjs';
 export { IconButton } from './IconButton/index.cjs';
@@ -45,4 +46,5 @@ export { Tooltip } from './Tooltip/index.cjs';
 export { Video, VideoProps } from './Video/index.cjs';
 import 'react';
 import '../attributes-DJIWir_0.cjs';
+import '../validation-Dqo1zqhT.cjs';
 import 'react/jsx-runtime';

package/dist/components/index.d.ts

@@ -17,6 +17,7 @@ export { Drawer } from './Drawer/index.js';
 export { Dropdown } from './Dropdown/index.js';
 export { default as Editor, EditorProps, EditorToolbarItem } from './Editor/index.js';
 export { EmptyState } from './EmptyState/index.js';
+export { Field, FieldMessage, hasError } from './FieldMessage/index.js';
 export { FileUpload } from './FileUpload/index.js';
 export { HtmlTypeWriter, HtmlTypeWriter as HtmlTypewriter } from './HtmlTypeWriter/index.js';
 export { IconButton } from './IconButton/index.js';
@@ -45,4 +46,5 @@ export { Tooltip } from './Tooltip/index.js';
 export { Video, VideoProps } from './Video/index.js';
 import 'react';
 import '../attributes-DJIWir_0.js';
+import '../validation-Dqo1zqhT.js';
 import 'react/jsx-runtime';