@x-plat/design-system 0.8.3 → 0.10.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;
@@ -2507,6 +2545,7 @@
 .lib-xplat-checkbox:hover > .checkbox.unchecked {
   background-color: var(--semantic-surface-neutral-disabled);
 }
+.lib-xplat-checkbox.primary > .checkbox.checked,
 .lib-xplat-checkbox.brand > .checkbox.checked {
   background-color: var(--semantic-surface-brand-default);
 }
@@ -2522,6 +2561,7 @@
 .lib-xplat-checkbox.info > .checkbox.checked {
   background-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-checkbox:hover.primary > .checkbox.checked,
 .lib-xplat-checkbox:hover.brand > .checkbox.checked {
   background-color: var(--semantic-surface-brand-strong);
 }
@@ -2693,37 +2733,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 {
@@ -3905,6 +3914,7 @@
 .lib-xplat-notification-badge .badge-indicator.info {
   background-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-notification-badge .badge-indicator.primary,
 .lib-xplat-notification-badge .badge-indicator.brand {
   background-color: var(--semantic-surface-brand-default);
 }
@@ -4004,6 +4014,7 @@
 .lib-xplat-pagination .page-btn svg {
   font-size: var(--semantic-typo-label-2-m-size);
 }
+.lib-xplat-pagination.primary .page-btn.active,
 .lib-xplat-pagination.brand .page-btn.active {
   background-color: var(--semantic-surface-brand-default);
 }
@@ -4077,6 +4088,7 @@
   border-radius: var(--spacing-radius-full);
   transition: width 0.3s ease;
 }
+.lib-xplat-progress.primary .bar,
 .lib-xplat-progress.brand .bar {
   background-color: var(--semantic-surface-brand-default);
 }
@@ -4179,6 +4191,7 @@
   border-color: var(--semantic-icon-primary);
   background-color: var(--semantic-surface-neutral-secondary);
 }
+.lib-xplat-radio.primary > .circle.checked,
 .lib-xplat-radio.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
@@ -4199,6 +4212,7 @@
   background-color: var(--semantic-surface-info-default);
   border-color: var(--semantic-surface-info-default);
 }
+.lib-xplat-radio:hover.primary > .circle.checked,
 .lib-xplat-radio:hover.brand > .circle.checked {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);
@@ -4465,6 +4479,7 @@
   stroke-dasharray: 42;
   stroke-dashoffset: 28;
 }
+.lib-xplat-spinner.primary .indicator,
 .lib-xplat-spinner.brand .indicator {
   stroke: var(--semantic-surface-brand-default);
 }
@@ -4554,6 +4569,17 @@
   color: var(--semantic-text-tertiary);
   margin-top: 2px;
 }
+.lib-xplat-steps.primary .step-item.completed .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-primary-default);
+}
+.lib-xplat-steps.primary .step-item.completed::after {
+  background-color: var(--semantic-surface-primary-default);
+}
+.lib-xplat-steps.primary .step-item.active .step-circle {
+  color: var(--semantic-text-inverse);
+  background-color: var(--semantic-surface-primary-default);
+}
 .lib-xplat-steps.brand .step-item.completed .step-circle {
   color: var(--semantic-text-inverse);
   background-color: var(--semantic-surface-brand-default);
@@ -4750,10 +4776,12 @@
   pointer-events: none;
   cursor: wait;
 }
+.lib-xplat-switch.primary.checked,
 .lib-xplat-switch.brand.checked {
   background-color: var(--semantic-surface-brand-default);
   border-color: var(--semantic-surface-brand-default);
 }
+.lib-xplat-switch.primary.checked:hover:not(.disabled):not(.animating),
 .lib-xplat-switch.brand.checked:hover:not(.disabled):not(.animating) {
   background-color: var(--semantic-surface-brand-strong);
   border-color: var(--semantic-surface-brand-strong);

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,6 @@ 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';
+import '../status-g_KP3qT6.cjs';

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,6 @@ 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';
+import '../status-g_KP3qT6.js';