@denisluyo/react-web 0.1.0

package/dist/button.css

@@ -0,0 +1,204 @@
+.ds-button {
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  justify-content: center;
+  min-width: 100px;
+  gap: 8px;
+  margin: 0;
+  border: 0;
+  border-radius: var(--ds-semantic-units-border-radius-l, 16px);
+  font-family: var(--ds-primitive-typography-family-inter, Inter), ui-sans-serif, system-ui, sans-serif;
+  font-weight: var(--ds-primitive-typography-weight-semi-bold, 600);
+  letter-spacing: 0;
+  text-align: center;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    background-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    border-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-button:focus-visible {
+  outline: var(--ds-semantic-border-width-s, 2px) solid var(--ds-semantic-color-border-brand-default, #7d5df3);
+  outline-offset: 2px;
+}
+
+.ds-button:disabled {
+  cursor: not-allowed;
+}
+
+.ds-button--large {
+  height: 56px;
+  padding: 16px;
+  font-size: var(--ds-semantic-typography-large-buttons-button1-size, 16px);
+  line-height: var(--ds-semantic-typography-large-buttons-button1-line-height, 24px);
+}
+
+.ds-button--medium {
+  height: 48px;
+  padding: 12px 16px;
+  font-size: var(--ds-semantic-typography-large-buttons-button2-size, 14px);
+  line-height: var(--ds-semantic-typography-large-buttons-button2-line-height, 20px);
+}
+
+.ds-button--small {
+  height: 40px;
+  padding: 8px 16px;
+  font-size: var(--ds-semantic-typography-large-buttons-button2-size, 14px);
+  line-height: var(--ds-semantic-typography-large-buttons-button2-line-height, 20px);
+}
+
+.ds-button__label {
+  min-width: 0;
+}
+
+.ds-button__icon {
+  display: inline-flex;
+  flex: 0 0 24px;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+}
+
+.ds-button__icon > svg,
+.ds-button__icon > img,
+.ds-button__icon > span {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.ds-button--contained-contrast {
+  color: var(--ds-semantic-color-text-neutral-invert, #fff);
+  background: var(--ds-semantic-color-background-brand-default, #7d5df3);
+}
+
+.ds-button--contained-contrast:hover:not(:disabled),
+.ds-button--contained-contrast[data-preview-state='hover'] {
+  background: var(--ds-semantic-color-background-brand-hover, #977df5);
+}
+
+.ds-button--contained-contrast:active:not(:disabled),
+.ds-button--contained-contrast[data-preview-state='pressed'] {
+  background: var(--ds-semantic-color-background-brand-pressed, #b19ef8);
+}
+
+.ds-button--contained {
+  color: var(--ds-semantic-color-text-neutral-invert, #fff);
+  background: var(--ds-semantic-color-background-neutral-inverse, #000);
+}
+
+.ds-button--contained:hover:not(:disabled),
+.ds-button--contained[data-preview-state='hover'] {
+  background: var(--ds-semantic-color-background-neutral-inverse2, #404040);
+}
+
+.ds-button--contained:active:not(:disabled),
+.ds-button--contained[data-preview-state='pressed'] {
+  background: var(--ds-semantic-color-background-neutral-terciary, #d3d3d3);
+}
+
+.ds-button--outlined {
+  border: var(--ds-semantic-border-width-xs, 1px) solid var(--ds-semantic-color-border-neutral-primary, #000);
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  background: var(--ds-semantic-color-background-neutral-primary, #fafafa);
+}
+
+.ds-button--outlined:hover:not(:disabled),
+.ds-button--outlined[data-preview-state='hover'] {
+  background: var(--ds-semantic-color-background-neutral-secondary, #ededed);
+}
+
+.ds-button--outlined:active:not(:disabled),
+.ds-button--outlined[data-preview-state='pressed'] {
+  background: var(--ds-semantic-color-background-neutral-terciary, #d3d3d3);
+}
+
+.ds-button--text {
+  border-radius: var(--ds-semantic-units-border-radius-s, 8px);
+  color: var(--ds-semantic-color-text-brand-primary, #7d5df3);
+  background: transparent;
+  text-decoration: underline;
+  text-underline-position: from-font;
+}
+
+.ds-button--text:hover:not(:disabled),
+.ds-button--text[data-preview-state='hover'] {
+  color: var(--ds-semantic-color-text-brand-secondary, #977df5);
+}
+
+.ds-button--text:active:not(:disabled),
+.ds-button--text[data-preview-state='pressed'] {
+  color: var(--ds-semantic-color-text-brand-tertiary, #b19ef8);
+}
+
+.ds-button--text.ds-button--large {
+  font-size: var(--ds-semantic-typography-large-links-link-l-size, 16px);
+  line-height: var(--ds-semantic-typography-large-links-link-l-line-height, 24px);
+}
+
+.ds-button--text.ds-button--medium {
+  font-size: var(--ds-semantic-typography-large-links-link-m-size, 14px);
+  line-height: var(--ds-semantic-typography-large-links-link-m-line-height, 20px);
+}
+
+.ds-button--text.ds-button--small {
+  font-size: var(--ds-semantic-typography-large-links-link-s-size, 12px);
+  line-height: var(--ds-semantic-typography-large-links-link-s-line-height, 16px);
+}
+
+.ds-button--text.ds-button--small .ds-button__icon {
+  flex-basis: 16px;
+  width: 16px;
+  height: 16px;
+}
+
+.ds-button:disabled:not([data-loading='true']) {
+  color: var(--ds-semantic-color-text-neutral-tertiary, #a0a0a0);
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}
+
+.ds-button--outlined:disabled:not([data-loading='true']) {
+  border-color: var(--ds-semantic-color-border-neutral-tertiary, #b3b3b3);
+}
+
+.ds-button--text:disabled:not([data-loading='true']) {
+  color: var(--ds-semantic-color-text-brand-disabled, #cbbefa);
+  background: transparent;
+}
+
+.ds-button[data-loading='true'] {
+  border-color: var(--ds-semantic-color-border-neutral-disabled, #e1e1e1);
+  color: transparent;
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}
+
+.ds-button__skeleton {
+  display: block;
+  width: 119px;
+  height: 24px;
+  border-radius: var(--ds-semantic-units-border-radius-xs, 4px);
+  background: var(--ds-semantic-color-background-neutral-skeleton, #b3b3b3);
+}
+
+.ds-button--medium .ds-button__skeleton,
+.ds-button--small .ds-button__skeleton {
+  width: 112px;
+}
+
+.ds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/checkbox.css

@@ -0,0 +1,79 @@
+.ds-checkbox {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  width: fit-content;
+  min-height: 24px;
+  gap: var(--ds-semantic-units-base-spacing-m, 12px);
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  font-family: var(--ds-primitive-typography-family-inter, Inter), ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--ds-semantic-typography-large-bodies-body1-semibold-size, 16px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body1-semibold-weight, 600);
+  line-height: var(--ds-semantic-typography-large-bodies-body1-semibold-line-height, 24px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body1-semibold-letter-spacing, 0);
+  cursor: pointer;
+}
+
+.ds-checkbox__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ds-checkbox__control {
+  display: inline-flex;
+  flex: 0 0 24px;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  overflow: hidden;
+  border: var(--ds-semantic-border-width-xs, 1px) solid var(--ds-semantic-color-border-neutral-primary, #000);
+  border-radius: var(--ds-semantic-units-border-radius-s, 8px);
+  background: transparent;
+}
+
+.ds-checkbox__check {
+  display: block;
+  width: 14px;
+  height: 11px;
+}
+
+.ds-checkbox__input:checked + .ds-checkbox__control {
+  border-color: var(--ds-semantic-color-background-neutral-inverse, #000);
+  background: var(--ds-semantic-color-background-neutral-inverse, #000);
+}
+
+.ds-checkbox[data-empty='true'] .ds-checkbox__control {
+  border-color: var(--ds-semantic-color-border-feedback-bold-informative, #0088ff);
+  background: var(--ds-semantic-color-background-feedback-light-informative, #e7f5fd);
+}
+
+.ds-checkbox__input:focus-visible + .ds-checkbox__control {
+  outline: var(--ds-semantic-border-width-s, 2px) solid var(--ds-semantic-color-border-brand-default, #7d5df3);
+  outline-offset: 2px;
+}
+
+.ds-checkbox:has(.ds-checkbox__input:disabled) {
+  cursor: not-allowed;
+}
+
+.ds-checkbox__input:disabled + .ds-checkbox__control {
+  border-color: var(--ds-semantic-color-border-neutral-primary, #000);
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}
+
+.ds-checkbox[data-selected='true']:has(.ds-checkbox__input:disabled) {
+  color: var(--ds-semantic-color-text-neutral-disabled, #e1e1e1);
+}
+
+.ds-checkbox__input:checked:disabled + .ds-checkbox__control {
+  border-color: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}

package/dist/chip.css

@@ -0,0 +1,106 @@
+.ds-chip {
+  box-sizing: border-box;
+  display: inline-flex;
+  min-width: 0;
+  min-height: 24px;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ds-semantic-units-base-spacing-xs, 4px);
+  margin: 0;
+  padding: var(--ds-semantic-units-base-spacing-xs, 4px) var(--ds-semantic-units-base-spacing-s, 8px);
+  border: 0;
+  border-radius: var(--ds-semantic-units-border-radius-full, 9999px);
+  color: var(--ds-semantic-color-text-neutral-secondary, #6c6c6c);
+  background: transparent;
+  box-shadow: inset 0 0 0 var(--ds-semantic-border-width-xs, 1px) var(--ds-semantic-color-border-neutral-secondary, #404040);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+  font-size: var(--ds-semantic-typography-large-bodies-body3-semibold-size, 12px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body3-semibold-weight, 600);
+  line-height: var(--ds-semantic-typography-large-bodies-body3-semibold-line-height, 16px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body3-semibold-letter-spacing, 0);
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    background-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    box-shadow var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-chip[data-selected='true'] {
+  color: var(--ds-semantic-color-text-neutral-invert, #fff);
+  background: var(--ds-semantic-color-background-neutral-inverse, #000);
+  box-shadow: none;
+}
+
+.ds-chip:not([data-selected='true'])[data-has-start-icon='true'][data-has-end-icon='true'] {
+  min-width: 92px;
+}
+
+.ds-chip:focus-visible {
+  outline: var(--ds-semantic-border-width-s, 2px) solid var(--ds-semantic-color-border-brand-default, #7d5df3);
+  outline-offset: 2px;
+}
+
+.ds-chip:disabled {
+  opacity: .45;
+  cursor: not-allowed;
+}
+
+.ds-chip__label {
+  min-width: 0;
+  overflow: hidden;
+  text-align: center;
+  text-overflow: ellipsis;
+}
+
+.ds-chip__icon,
+.ds-chip__info {
+  display: block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+}
+
+.ds-chip__icon {
+  color: var(--ds-semantic-color-border-neutral-secondary, #404040);
+}
+
+.ds-chip[data-selected='true'] .ds-chip__icon {
+  color: var(--ds-semantic-color-background-neutral-primary, #fafafa);
+}
+
+.ds-chip__info-ring,
+.ds-chip__info-mark {
+  display: block;
+  position: absolute;
+  background: currentColor;
+  -webkit-mask-position: center;
+  mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+
+.ds-chip__info-ring {
+  top: 1.5px;
+  left: 1.67px;
+  width: 13px;
+  height: 13px;
+  -webkit-mask-image: url('./assets/chip-info-ring.svg');
+  mask-image: url('./assets/chip-info-ring.svg');
+}
+
+.ds-chip__info-mark {
+  top: 5.03px;
+  left: 7.67px;
+  width: 1px;
+  height: 5.94px;
+  -webkit-mask-image: url('./assets/chip-info-mark.svg');
+  mask-image: url('./assets/chip-info-mark.svg');
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-chip { transition: none; }
+}

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+export { Button } from './Button.js';
+export type { ButtonProps, ButtonSize, ButtonVariant } from './Button.js';
+export { RadioButton } from './RadioButton.js';
+export type { RadioButtonProps, RadioButtonSize } from './RadioButton.js';
+export { Checkbox } from './Checkbox.js';
+export type { CheckboxProps } from './Checkbox.js';
+export { TextField } from './TextField.js';
+export type { TextFieldProps, TextFieldPreviewState } from './TextField.js';
+export { TextArea } from './TextArea.js';
+export type { TextAreaProps, TextAreaPreviewState, TextAreaResize } from './TextArea.js';
+export { Chip } from './Chip.js';
+export type { ChipProps } from './Chip.js';
+export { Toast } from './Toast.js';
+export type { ToastProps, ToastState } from './Toast.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAC1E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,gBAAgB,CAAC;AAC5E,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/index.js

@@ -0,0 +1,7 @@
+export { Button } from './Button.js';
+export { RadioButton } from './RadioButton.js';
+export { Checkbox } from './Checkbox.js';
+export { TextField } from './TextField.js';
+export { TextArea } from './TextArea.js';
+export { Chip } from './Chip.js';
+export { Toast } from './Toast.js';

package/dist/radio-button.css

@@ -0,0 +1,138 @@
+.ds-radio {
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  width: fit-content;
+  gap: 8px;
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  font-family: var(--ds-primitive-typography-family-inter, Inter), ui-sans-serif, system-ui, sans-serif;
+  font-weight: var(--ds-primitive-typography-weight-regular, 400);
+  cursor: pointer;
+}
+
+.ds-radio__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.ds-radio__control {
+  display: inline-flex;
+  position: relative;
+  z-index: 0;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  border: var(--ds-semantic-border-width-xs, 1px) solid var(--ds-semantic-color-border-neutral-tertiary, #b3b3b3);
+  border-radius: 50%;
+  background: var(--ds-semantic-color-background-neutral-primary, #fafafa);
+  transition:
+    background-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    border-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-radio__control::before {
+  position: absolute;
+  z-index: -1;
+  width: calc(100% + 8px);
+  height: calc(100% + 8px);
+  border-radius: 50%;
+  background: transparent;
+  content: '';
+  transition: background-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-radio__dot {
+  width: 62.5%;
+  height: 62.5%;
+  border-radius: 50%;
+  background: var(--ds-semantic-color-text-neutral-primary, #000);
+  opacity: 0;
+  transform: scale(.65);
+  transition:
+    opacity var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease),
+    transform var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-radio--medium .ds-radio__control {
+  width: 24px;
+  height: 24px;
+}
+
+.ds-radio--medium .ds-radio__label {
+  font-size: var(--ds-semantic-typography-large-bodies-body2-regular-size, 14px);
+  line-height: var(--ds-semantic-typography-large-bodies-body2-regular-line-height, 20px);
+}
+
+.ds-radio--small .ds-radio__control {
+  width: 16px;
+  height: 16px;
+  border-width: .8px;
+}
+
+.ds-radio--small .ds-radio__label {
+  font-size: var(--ds-semantic-typography-large-bodies-body3-regular-size, 12px);
+  line-height: var(--ds-semantic-typography-large-bodies-body3-regular-line-height, 16px);
+}
+
+.ds-radio__input:checked + .ds-radio__control {
+  border-color: var(--ds-semantic-color-border-neutral-primary, #000);
+}
+
+.ds-radio__input:checked + .ds-radio__control .ds-radio__dot {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ds-radio:hover .ds-radio__input:not(:disabled) + .ds-radio__control,
+.ds-radio__input[data-preview-state='hover']:not(:disabled) + .ds-radio__control {
+  background: var(--ds-semantic-color-background-neutral-secondary, #ededed);
+}
+
+.ds-radio:hover .ds-radio__input:not(:disabled) + .ds-radio__control::before,
+.ds-radio__input[data-preview-state='hover']:not(:disabled) + .ds-radio__control::before {
+  background: var(--ds-semantic-color-background-neutral-secondary, #ededed);
+}
+
+.ds-radio:active .ds-radio__input:not(:disabled) + .ds-radio__control,
+.ds-radio__input[data-preview-state='pressed']:not(:disabled) + .ds-radio__control {
+  background: var(--ds-semantic-color-background-neutral-primary, #fafafa);
+}
+
+.ds-radio:active .ds-radio__input:not(:disabled) + .ds-radio__control::before,
+.ds-radio__input[data-preview-state='pressed']:not(:disabled) + .ds-radio__control::before {
+  background: var(--ds-semantic-color-background-neutral-terciary, #d3d3d3);
+}
+
+.ds-radio__input:focus-visible + .ds-radio__control {
+  outline: var(--ds-semantic-border-width-s, 2px) solid var(--ds-semantic-color-border-brand-default, #7d5df3);
+  outline-offset: 2px;
+}
+
+.ds-radio:has(.ds-radio__input:disabled) {
+  color: var(--ds-semantic-color-text-neutral-disabled, #e1e1e1);
+  cursor: not-allowed;
+}
+
+.ds-radio__input:disabled + .ds-radio__control {
+  border-color: var(--ds-semantic-color-border-neutral-tertiary, #b3b3b3);
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+}
+
+.ds-radio__input:checked:disabled + .ds-radio__control {
+  border-color: var(--ds-semantic-color-border-neutral-disabled, #e1e1e1);
+}
+
+.ds-radio__input:checked:disabled + .ds-radio__control .ds-radio__dot {
+  background: var(--ds-semantic-color-background-neutral-skeleton, #b3b3b3);
+}
+
+.ds-radio[data-loading='true'] {
+  color: var(--ds-semantic-color-text-neutral-secondary, #6c6c6c);
+}

package/dist/styles.css

@@ -0,0 +1,7 @@
+@import './button.css';
+@import './radio-button.css';
+@import './checkbox.css';
+@import './text-field.css';
+@import './text-area.css';
+@import './chip.css';
+@import './toast.css';

package/dist/text-area.css

@@ -0,0 +1,119 @@
+.ds-text-area {
+  display: inline-flex;
+  width: 328px;
+  max-width: 100%;
+  flex-direction: column;
+  gap: var(--ds-semantic-units-base-spacing-xs, 4px);
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
+.ds-text-area__label,
+.ds-text-area__help {
+  min-height: 16px;
+  font-size: var(--ds-semantic-typography-large-bodies-body3-semibold-size, 12px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body3-semibold-weight, 600);
+  line-height: var(--ds-semantic-typography-large-bodies-body3-semibold-line-height, 16px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body3-semibold-letter-spacing, 0);
+}
+
+.ds-text-area__control {
+  display: block;
+  position: relative;
+  width: 100%;
+  height: 120px;
+}
+
+.ds-text-area__input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  height: 120px;
+  margin: 0;
+  padding: var(--ds-semantic-units-base-spacing-l, 16px);
+  overflow: auto;
+  border: var(--ds-semantic-border-width-xs, 1px) solid var(--ds-semantic-color-border-neutral-tertiary, #b3b3b3);
+  border-radius: var(--ds-semantic-units-border-radius-s, 8px);
+  outline: 0;
+  color: var(--ds-semantic-color-text-neutral-primary, #000);
+  background: transparent;
+  font-family: inherit;
+  font-size: var(--ds-semantic-typography-large-bodies-body1-regular-size, 16px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body1-regular-weight, 400);
+  line-height: var(--ds-semantic-typography-large-bodies-body1-regular-line-height, 24px);
+  letter-spacing: var(--ds-semantic-typography-large-bodies-body1-regular-letter-spacing, 0);
+  transition: border-color var(--ds-semantic-motion-duration-fast, 120ms) var(--ds-semantic-motion-easing-standard, ease);
+}
+
+.ds-text-area__input::placeholder {
+  color: var(--ds-semantic-color-text-neutral-disabled, #e1e1e1);
+  opacity: 1;
+}
+
+.ds-text-area__input:focus,
+.ds-text-area[data-preview-state='focus'] .ds-text-area__input,
+.ds-text-area[data-preview-state='writing'] .ds-text-area__input,
+.ds-text-area[data-has-value='true'] .ds-text-area__input {
+  padding-block: var(--ds-semantic-units-base-spacing-m, 12px);
+}
+
+.ds-text-area__input:focus,
+.ds-text-area[data-preview-state='focus'] .ds-text-area__input,
+.ds-text-area[data-preview-state='writing'] .ds-text-area__input {
+  border-color: var(--ds-semantic-color-border-neutral-primary, #000);
+}
+
+.ds-text-area__help {
+  padding-inline: var(--ds-semantic-units-base-spacing-s, 8px);
+}
+
+.ds-text-area[data-error='true'] .ds-text-area__label,
+.ds-text-area[data-error='true'] .ds-text-area__help {
+  color: var(--ds-semantic-color-text-feedback-bold-error, #f22418);
+}
+
+.ds-text-area[data-error='true'] .ds-text-area__input,
+.ds-text-area[data-preview-state='error-writing'] .ds-text-area__input {
+  border-color: var(--ds-semantic-color-border-feedback-bold-error, #f22418);
+}
+
+.ds-text-area[data-disabled='true'] .ds-text-area__label,
+.ds-text-area[data-disabled='true'] .ds-text-area__help {
+  color: var(--ds-semantic-color-text-neutral-disabled, #e1e1e1);
+}
+
+.ds-text-area[data-disabled='true'] .ds-text-area__input {
+  padding: var(--ds-semantic-units-base-spacing-l, 16px);
+  border-color: transparent;
+  color: var(--ds-semantic-color-text-neutral-tertiary, #a0a0a0);
+  background: var(--ds-semantic-color-background-neutral-disabled, #e1e1e1);
+  cursor: not-allowed;
+  opacity: 1;
+  -webkit-text-fill-color: currentColor;
+}
+
+.ds-text-area__preview {
+  display: inline-flex;
+  position: absolute;
+  inset: var(--ds-semantic-units-base-spacing-m, 12px) auto auto var(--ds-semantic-units-base-spacing-l, 16px);
+  max-width: calc(100% - 32px);
+  align-items: flex-start;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: pre-wrap;
+  font-size: var(--ds-semantic-typography-large-bodies-body1-regular-size, 16px);
+  font-weight: var(--ds-semantic-typography-large-bodies-body1-regular-weight, 400);
+  line-height: var(--ds-semantic-typography-large-bodies-body1-regular-line-height, 24px);
+}
+
+.ds-text-area__preview-caret {
+  width: 1px;
+  height: 20px;
+  flex: 0 0 auto;
+  background: var(--ds-semantic-color-text-neutral-primary, #000);
+  visibility: visible;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ds-text-area__input { transition: none; }
+}