@uniai-fe/uds-primitives 0.3.17 → 0.3.18

package/dist/styles.css

@@ -344,6 +344,19 @@
   --input-table-text-large-size: var(--font-body-small-size);
   --input-table-text-large-line-height: var(--font-body-small-line-height);
   --input-table-text-large-weight: var(--font-body-small-weight);
+  /* Figma size 매핑: small/medium/large typography 토큰 */
+  --input-text-small-size: var(--font-body-xsmall-size);
+  --input-text-small-line-height: var(--font-label-medium-line-height);
+  --input-text-small-weight: 400;
+  --input-text-small-letter-spacing: 0.2px;
+  --input-text-medium-size: var(--font-body-medium-size);
+  --input-text-medium-line-height: var(--font-body-medium-line-height);
+  --input-text-medium-weight: 400;
+  --input-text-medium-letter-spacing: 0px;
+  --input-text-large-size: var(--font-body-large-size);
+  --input-text-large-line-height: var(--font-body-large-line-height);
+  --input-text-large-weight: 400;
+  --input-text-large-letter-spacing: 0px;
   /* Label/helper colors */
   --input-label-color: var(--color-label-standard);
   --input-label-accent-color: var(--color-primary-default);
@@ -365,9 +378,9 @@
   --input-placeholder-disabled-color: var(--color-label-disabled);
   /* 변경: readonly 입력은 placeholder를 숨겨 value 텍스트 대비를 고정한다. */
   --input-placeholder-readonly-color: transparent;
-  --input-font-size: var(--font-body-medium-size);
-  --input-line-height: var(--font-body-medium-line-height);
-  --input-font-weight: 400;
+  --input-font-size: var(--input-text-medium-size);
+  --input-line-height: var(--input-text-medium-line-height);
+  --input-font-weight: var(--input-text-medium-weight);
   --input-letter-spacing: 0px;
   /* Border tokens */
   --input-border-color: var(--color-border-standard-cool-gray);
@@ -497,18 +510,19 @@
   --input-table-text-large-line-height
   );
   --select-table-text-large-weight: var(--input-table-text-large-weight);
-  --select-text-small-size: 15px;
-  --select-text-small-line-height: 1.4;
-  --select-text-small-letter-spacing: 0.2px;
-  --select-text-small-weight: 400;
-  --select-text-medium-size: var(--font-body-medium-size);
-  --select-text-medium-line-height: var(--font-body-medium-line-height);
-  --select-text-medium-letter-spacing: 0;
-  --select-text-medium-weight: 400;
-  --select-text-large-size: var(--font-body-large-size);
-  --select-text-large-line-height: var(--font-body-large-line-height);
-  --select-text-large-letter-spacing: 0;
-  --select-text-large-weight: 400;
+  /* 변경: trigger 텍스트 토큰을 input text 토큰과 직접 매핑해 size별 typography를 동기화한다. */
+  --select-text-small-size: var(--input-text-small-size);
+  --select-text-small-line-height: var(--input-text-small-line-height);
+  --select-text-small-letter-spacing: var(--input-text-small-letter-spacing);
+  --select-text-small-weight: var(--input-text-small-weight);
+  --select-text-medium-size: var(--input-text-medium-size);
+  --select-text-medium-line-height: var(--input-text-medium-line-height);
+  --select-text-medium-letter-spacing: var(--input-text-medium-letter-spacing);
+  --select-text-medium-weight: var(--input-text-medium-weight);
+  --select-text-large-size: var(--input-text-large-size);
+  --select-text-large-line-height: var(--input-text-large-line-height);
+  --select-text-large-letter-spacing: var(--input-text-large-letter-spacing);
+  --select-text-large-weight: var(--input-text-large-weight);
   --select-icon-size-small: 1.6rem;
   --select-icon-size-medium: 2rem;
   --select-icon-size-large: 2rem;
@@ -652,9 +666,15 @@
 .alternate.is-horizontal.loading .empty-text {
   transform: translateY(0.2rem);
 }
+.alternate.is-horizontal.loading .empty-text {
+  margin-left: 1rem;
+}
 .alternate.is-vertical {
   flex-direction: column;
 }
+.alternate.is-vertical .empty-text {
+  margin-top: 1rem;
+}
 
 .alternate-loading-icon {
   width: 2.4rem;
@@ -666,12 +686,6 @@
   justify-content: center;
   animation: alternate-loading-spin 1s linear infinite;
 }
-.alternate-loading-icon.is-horizontal {
-  margin-right: 1rem;
-}
-.alternate-loading-icon.is-vertical {
-  margin-bottom: 1rem;
-}
 .alternate-loading-icon.is-medium {
   width: 3.6rem;
   height: 3.6rem;
@@ -680,6 +694,10 @@
   width: 5.2rem;
   height: 5.2rem;
 }
+.alternate-loading-icon svg {
+  width: 100%;
+  height: 100%;
+}
 
 
 
@@ -2469,9 +2487,17 @@ figure.chip {
 }
 .input-field[data-size=small] {
   min-height: var(--input-default-height-small);
+  --input-font-size: var(--input-text-small-size);
+  --input-line-height: var(--input-text-small-line-height);
+  --input-font-weight: var(--input-text-small-weight);
+  --input-letter-spacing: var(--input-text-small-letter-spacing);
 }
 .input-field[data-size=large] {
   min-height: var(--input-default-height-large);
+  --input-font-size: var(--input-text-large-size);
+  --input-line-height: var(--input-text-large-line-height);
+  --input-font-weight: var(--input-text-large-weight);
+  --input-letter-spacing: var(--input-text-large-letter-spacing);
 }
 .input-field[data-priority=secondary] {
   border: none;
@@ -2501,6 +2527,10 @@ figure.chip {
   border-radius: var(--input-tertiary-radius-base);
   background-color: var(--input-surface-color);
   min-height: var(--input-tertiary-height-base);
+  --input-font-size: var(--input-text-medium-size);
+  --input-line-height: var(--input-text-medium-line-height);
+  --input-font-weight: var(--input-text-medium-weight);
+  --input-letter-spacing: var(--input-text-medium-letter-spacing);
   row-gap: var(--input-tertiary-row-gap);
   column-gap: var(--input-default-gap);
   flex-wrap: wrap;
@@ -3876,7 +3906,7 @@ figure.chip {
 }
 
 .select-button[data-priority=secondary][data-size=large] .select-label {
-  font-weight: 600;
+  --select-text-large-weight: 600;
 }
 
 .select-tags {
@@ -4187,157 +4217,162 @@ figure.chip {
 
 
 
-.table.table-container {
+.table {
   width: 100%;
   border-collapse: collapse;
   border-spacing: 0;
 }
-
-.table.table-container .table-native-cell.table-th,
-.table.table-container .table-native-cell.table-td {
+.table :where(.table-native-cell):where(.table-th) {
   vertical-align: middle;
   background-color: var(--table-cell-background-color);
   text-align: left;
 }
-
-.table.table-container[data-layout=line] .table-native-cell.table-th,
-.table.table-container[data-layout=line] .table-native-cell.table-td {
+.table :where(.table-native-cell):where(.table-td) {
+  vertical-align: middle;
+  background-color: var(--table-cell-background-color);
+  text-align: left;
+  position: relative;
+  z-index: 0;
+}
+.table[data-layout=line] :where(.table-native-cell):where(.table-th) {
   --table-cell-padding-inline: var(--table-line-cell-padding-inline);
   --table-cell-padding-block: var(--table-line-cell-padding-block);
   border-bottom: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=line] .table-head .table-native-cell.table-th {
+.table[data-layout=line] :where(.table-native-cell):where(.table-td) {
+  --table-cell-padding-inline: var(--table-line-cell-padding-inline);
+  --table-cell-padding-block: var(--table-line-cell-padding-block);
+  border-bottom: 1px solid var(--table-border-color);
+}
+.table[data-layout=line] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   height: var(--table-line-cell-height-head);
   border-top: 1px solid var(--table-border-color);
   background-color: var(--table-line-head-background-color);
 }
-
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-td,
-.table.table-container[data-layout=line] .table-foot .table-native-cell.table-td {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-td) {
   height: var(--table-line-cell-height-body);
 }
-
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-th .table-native-cell-text,
-.table.table-container[data-layout=line] .table-body .table-native-cell.table-th .table-cell-text {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-th) :where(.table-native-cell-text) {
   font-weight: 600;
 }
-
-.table.table-container[data-layout=line] .table-native-cell[rowspan] {
+.table[data-layout=line] :where(.table-body) :where(.table-native-cell):where(.table-th) :where(.table-cell-text) {
+  font-weight: 600;
+}
+.table[data-layout=line] :where(.table-foot) :where(.table-native-cell):where(.table-td) {
+  height: var(--table-line-cell-height-body);
+}
+.table[data-layout=line] :where(.table-native-cell[rowspan]) {
   border-right: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=grid] .table-native-cell.table-th,
-.table.table-container[data-layout=grid] .table-native-cell.table-td {
+.table[data-layout=grid] {
+  border-radius: var(--table-grid-border-radius);
+  overflow: visible;
+  isolation: isolate;
+}
+.table[data-layout=grid] :where(.table-native-cell):where(.table-th) {
   --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
   --table-cell-padding-block: var(--table-grid-cell-padding-block);
   height: var(--table-grid-cell-height);
 }
-
-.table.table-container[data-layout=grid] {
-  border-radius: var(--table-grid-border-radius);
-  overflow: visible;
-  isolation: isolate;
+.table[data-layout=grid] :where(.table-native-cell):where(.table-td) {
+  --table-cell-padding-inline: var(--table-grid-cell-padding-inline);
+  --table-cell-padding-block: var(--table-grid-cell-padding-block);
+  height: var(--table-grid-cell-height);
 }
-
-.table.table-container[data-layout=grid] .table-head .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-head) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-head-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-body .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:first-child) {
+  border-top-left-radius: var(--table-grid-border-radius);
+}
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:last-child) {
+  border-top-right-radius: var(--table-grid-border-radius);
+}
+.table[data-layout=grid] :where(.table-body) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-header-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-native-cell.table-th {
+.table[data-layout=grid] :where(.table-foot) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-header-background-color);
 }
-
-.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-th,
-.table.table-container[data-layout=grid] .table-row[data-highlighted=true] .table-native-cell.table-td {
+.table[data-layout=grid] :where(.table-row[data-highlighted=true]) :where(.table-native-cell):where(.table-th) {
   background-color: var(--table-grid-row-highlight-background-color);
 }
-
-.table.table-container .table-row > .table-native-cell.table-th:first-child {
-  position: sticky;
-  left: 0;
+.table[data-layout=grid] :where(.table-row[data-highlighted=true]) :where(.table-native-cell):where(.table-td) {
+  background-color: var(--table-grid-row-highlight-background-color);
 }
-
-.table.table-container .table-head .table-row > .table-native-cell.table-th:first-child {
-  z-index: 150;
+.table[data-layout=grid] :where(.table-cell-content) {
+  border-right: 1px solid var(--table-border-color);
+  border-bottom: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-body .table-row > .table-native-cell.table-th:first-child {
-  z-index: 100;
+.table[data-layout=grid] :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell) > :where(.table-cell-content) {
+  border-top: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-foot .table-row > .table-native-cell.table-th:first-child {
-  z-index: 50;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell:first-child) > :where(.table-cell-content) {
+  border-left: 1px solid var(--table-border-color);
 }
-
-.table.table-container .table-head .table-row:first-child > .table-native-cell.table-th:first-child {
-  z-index: 200;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell[rowspan]) > :where(.table-cell-content) {
+  border-right: 0;
 }
-
-.table.table-container .table-native-cell.table-td {
-  position: relative;
-  z-index: 0;
+.table[data-layout=grid] :where(.table-row) > :where(.table-native-cell[rowspan] + .table-native-cell) > :where(.table-cell-content) {
+  border-left: 1px solid var(--table-border-color);
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:first-child {
-  border-top-left-radius: var(--table-grid-border-radius);
+.table[data-layout=grid] :where(.table-row:first-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-top-left-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell:last-child {
-  border-top-right-radius: var(--table-grid-border-radius);
+.table[data-layout=grid] :where(.table-row:first-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-top-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child {
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:first-child) {
   border-bottom-left-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child {
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-bottom-left-radius: inherit;
+}
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:last-child) {
   border-bottom-right-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-cell-content {
-  border-right: 1px solid var(--table-border-color);
-  border-bottom: 1px solid var(--table-border-color);
+.table[data-layout=grid] :where(.table-foot) :where(.table-row:last-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-bottom-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-head .table-row:first-child > .table-native-cell > .table-cell-content {
-  border-top: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:first-child) {
+  border-bottom-left-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell:first-child > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:first-child) :where(.table-cell-content) {
+  border-bottom-left-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] > .table-cell-content {
-  border-right: 0;
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:last-child) {
+  border-bottom-right-radius: var(--table-grid-border-radius);
 }
-
-.table.table-container[data-layout=grid] .table-row > .table-native-cell[rowspan] + .table-native-cell > .table-cell-content {
-  border-left: 1px solid var(--table-border-color);
+.table[data-layout=grid]:not([data-has-footer=true]) :where(.table-body:last-of-type) :where(.table-row:last-child) > :where(.table-native-cell:last-child) :where(.table-cell-content) {
+  border-bottom-right-radius: inherit;
 }
-
-.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:first-child .table-cell-content {
-  border-top-left-radius: inherit;
+.table :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  position: sticky;
+  left: 0;
 }
-
-.table.table-container[data-layout=grid] .table-row:first-child > .table-native-cell:last-child .table-cell-content {
-  border-top-right-radius: inherit;
+.table :where(.table-head) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 150;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:first-child .table-cell-content,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:first-child .table-cell-content {
-  border-bottom-left-radius: inherit;
+.table :where(.table-body) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 100;
 }
-
-.table.table-container[data-layout=grid] .table-foot .table-row:last-child > .table-native-cell:last-child .table-cell-content,
-.table.table-container[data-layout=grid]:not([data-has-footer=true]) .table-body:last-of-type .table-row:last-child > .table-native-cell:last-child .table-cell-content {
-  border-bottom-right-radius: inherit;
+.table :where(.table-foot) :where(.table-row) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 50;
+}
+.table :where(.table-head) :where(.table-row:first-child) > :where(.table-native-cell:first-child):where(.table-th) {
+  z-index: 200;
+}
+.table :where(.table-foot .table-cell-content) {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+.table :where(.table-foot .table-cell-text) {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
 }
 
 .table-scroll-wrapper {
@@ -4359,14 +4394,13 @@ figure.chip {
   overflow: auto;
 }
 
-.table-native-cell.table-th .table-native-cell-text {
+:where(.table-native-cell):where(.table-th) .table-native-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
   line-height: var(--table-th-text-line-height);
 }
-
-.table-native-cell.table-td .table-native-cell-text {
+:where(.table-native-cell):where(.table-td) .table-native-cell-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
@@ -4448,7 +4482,7 @@ figure.chip {
   margin: 0;
 }
 
-.table-cell-content .table-cell-text {
+:where(.table-cell-content) :where(.table-cell-text) {
   color: inherit;
   font-size: inherit;
   font-weight: inherit;
@@ -4551,7 +4585,7 @@ figure.chip {
   align-items: baseline;
 }
 
-.table-cell.table-head-cell .table-cell-text {
+:where(.table-cell):where(.table-head-cell) .table-cell-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
@@ -4567,31 +4601,31 @@ figure.chip {
   line-height: var(--table-td-text-line-height);
 }
 
-.table-cell.table-head-cell .radio-label-text {
+:where(.table-cell):where(.table-head-cell) .radio-label-text {
   color: var(--table-th-text-color);
   font-size: var(--table-th-text-size);
   font-weight: var(--table-th-text-weight);
   line-height: var(--table-th-text-line-height);
 }
-
-.table-cell.table-body-cell .table-cell-text,
-.table-cell.table-foot-cell .table-cell-text {
+:where(.table-cell):where(.table-body-cell) .table-cell-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
   line-height: var(--table-td-text-line-height);
 }
-
-.table.table-container .table-foot .table-cell-content,
-.table.table-container .table-foot .table-cell-text {
+:where(.table-cell):where(.table-body-cell) .radio-label-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);
   line-height: var(--table-td-text-line-height);
 }
-
-.table-cell.table-body-cell .radio-label-text,
-.table-cell.table-foot-cell .radio-label-text {
+:where(.table-cell):where(.table-foot-cell) .table-cell-text {
+  color: var(--table-td-text-color);
+  font-size: var(--table-td-text-size);
+  font-weight: var(--table-td-text-weight);
+  line-height: var(--table-td-text-line-height);
+}
+:where(.table-cell):where(.table-foot-cell) .radio-label-text {
   color: var(--table-td-text-color);
   font-size: var(--table-td-text-size);
   font-weight: var(--table-td-text-weight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniai-fe/uds-primitives",
-  "version": "0.3.17",
+  "version": "0.3.18",
   "description": "UNIAI Design System; Primitives Components Package",
   "type": "module",
   "private": false,
@@ -15,7 +15,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "packageManager": "pnpm@10.28.2",
+  "packageManager": "pnpm@10.30.2",
   "engines": {
     "node": ">=24",
     "pnpm": ">=10"
@@ -65,7 +65,16 @@
     "react": "^19",
     "react-daum-postcode": "^3",
     "react-dom": "^19",
-    "react-hook-form": "^7"
+    "react-hook-form": "^7",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-visually-hidden": "^1.2.4",
+    "clsx": "^2.1.1",
+    "dayjs": "^1.11.19"
   },
   "dependencies": {
     "@radix-ui/react-checkbox": "^1.3.3",
@@ -77,15 +86,15 @@
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
-    "react-daum-postcode": "^3.2.0"
+    "react-daum-postcode": "^4.0.0"
   },
   "devDependencies": {
-    "@mantine/core": "^8.3.14",
-    "@mantine/dates": "^8.3.14",
-    "@mantine/hooks": "^8.3.14",
+    "@mantine/core": "^8.3.15",
+    "@mantine/dates": "^8.3.15",
+    "@mantine/hooks": "^8.3.15",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^24.10.2",
-    "@types/react": "^19.2.11",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@uniai-fe/eslint-config": "workspace:*",
     "@uniai-fe/next-devkit": "workspace:*",
@@ -94,7 +103,7 @@
     "@uniai-fe/util-functions": "workspace:*",
     "eslint": "^9.39.2",
     "prettier": "^3.8.1",
-    "react-hook-form": "^7.71.1",
+    "react-hook-form": "^7.71.2",
     "sass": "^1.97.3",
     "typescript": "~5.9.3"
   }

package/src/components/alternate/styles/alternate.scss

@@ -31,11 +31,17 @@
       .empty-text {
         transform: translateY(0.2rem);
       }
+      .empty-text {
+        margin-left: 1rem;
+      }
     }
   }
 
   &.is-vertical {
     flex-direction: column;
+    .empty-text {
+      margin-top: 1rem;
+    }
   }
 }
 
@@ -49,14 +55,6 @@
   justify-content: center;
   animation: alternate-loading-spin 1s linear infinite;
 
-  &.is-horizontal {
-    margin-right: 1rem;
-  }
-
-  &.is-vertical {
-    margin-bottom: 1rem;
-  }
-
   &.is-medium {
     width: 3.6rem;
     height: 3.6rem;
@@ -66,4 +64,9 @@
     width: 5.2rem;
     height: 5.2rem;
   }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
 }

package/src/components/chip/markup/Chip.tsx

@@ -43,13 +43,15 @@ const Chip = forwardRef<HTMLElement, ChipProps>((props, ref) => {
     return (
       <ChipInputStyle
         {...props}
-        forwardedRef={ref as Ref<HTMLElementTagNameMap["figure"]>}
+        // 변경: 하위 스타일 컴포넌트가 forwardRef를 사용하므로 ref를 직접 전달한다.
+        ref={ref as Ref<HTMLElementTagNameMap["figure"]>}
       />
     );
   }
 
   return (
-    <ChipDefaultStyle {...props} forwardedRef={ref as Ref<HTMLButtonElement>} />
+    // 변경: interactive 경로도 forwardRef 기반 ref 전달로 통일한다.
+    <ChipDefaultStyle {...props} ref={ref as Ref<HTMLButtonElement>} />
   );
 });