@ncds/ui-admin 1.8.3 → 1.8.4

package/dist/ui-admin/assets/styles/style.css

@@ -6218,6 +6218,298 @@ button {
   padding: var(--spacing-lg) 0;
 }
 
+.ncua-block-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  width: 100%;
+  background: var(--base-white);
+  border: 1px solid var(--gray-100);
+  border-radius: 12px;
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+.ncua-block-container__body {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px 24px;
+}
+
+.ncua-block-header {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: var(--base-white);
+}
+.ncua-block-header__row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 8px;
+  min-height: 48px;
+  padding: 10px 24px;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--column .ncua-block-header__row {
+  padding: 12px 24px;
+  box-shadow: none;
+}
+.ncua-block-header--no-divider .ncua-block-header__row {
+  box-shadow: none;
+}
+.ncua-block-header__title-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.ncua-block-header__title-area .ncua-tooltip {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-block-header__title {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-md);
+  color: var(--gray-700);
+}
+.ncua-block-header__action-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-block-header__collapsible-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+.ncua-block-header__required-notice {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weights-commerce-sans-0);
+  line-height: var(--line-heights-xs);
+  white-space: nowrap;
+}
+.ncua-block-header__required-notice--red {
+  color: var(--primary-red-500);
+}
+.ncua-block-header__required-notice--gray {
+  color: var(--gray-700);
+}
+.ncua-block-header__badge {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-block-header--column .ncua-block-header__description {
+  padding: 0 24px 12px;
+  font-size: var(--font-size-xs);
+  font-weight: 400;
+  line-height: var(--line-heights-xs);
+  color: var(--gray-400);
+  margin: 0;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--column.ncua-block-header--no-divider .ncua-block-header__description {
+  box-shadow: none;
+}
+.ncua-block-header--has-tab {
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header__control-strip {
+  padding: 10px 24px;
+  box-shadow: inset 0 -1px 0 0 var(--gray-100);
+}
+.ncua-block-header--no-divider .ncua-block-header__control-strip {
+  box-shadow: none;
+}
+.ncua-block-header__tabs {
+  padding: 0 24px;
+}
+.ncua-block-header__tabs .ncua-horizontal-tab--underline::after,
+.ncua-block-header__tabs .ncua-horizontal-tab--underline-fill::after {
+  display: none;
+}
+
+.ncua-sub-title {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.ncua-sub-title__title-row {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.ncua-sub-title__title-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+.ncua-sub-title__title-area .ncua-tooltip {
+  display: inline-flex;
+  align-items: center;
+}
+.ncua-sub-title__required-marker {
+  color: var(--primary-red-500);
+  font-weight: 700;
+}
+.ncua-sub-title__title {
+  color: var(--gray-700);
+  font-weight: 700;
+}
+.ncua-sub-title__action {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+}
+.ncua-sub-title__description {
+  margin: 0;
+  color: var(--gray-400);
+  font-weight: 400;
+}
+.ncua-sub-title__error {
+  margin: 0;
+  color: var(--primary-red-600);
+  font-weight: 400;
+}
+.ncua-sub-title--middle .ncua-sub-title__title {
+  font-size: var(--font-size-md);
+  font-weight: 500;
+  line-height: var(--line-heights-md);
+}
+.ncua-sub-title--sm .ncua-sub-title__title-area {
+  gap: 6px;
+}
+.ncua-sub-title--sm .ncua-sub-title__title {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-heights-sm);
+}
+.ncua-sub-title--sm .ncua-sub-title__description {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-sub-title--xs .ncua-sub-title__title-area {
+  gap: 4px;
+}
+.ncua-sub-title--xs .ncua-sub-title__title {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-sub-title--xs .ncua-sub-title__description {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+.ncua-sub-title--xs .ncua-sub-title__error {
+  font-size: var(--font-size-xxs);
+  line-height: var(--line-heights-xxs);
+}
+
+.ncua-page-title {
+  width: 100%;
+  background: var(--base-white);
+  box-shadow: var(--shadow-sm);
+}
+.ncua-page-title--fixed {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  border-bottom: 1px solid var(--gray-300);
+}
+.ncua-page-title__page-header {
+  padding: 24px 40px;
+}
+.ncua-page-title--fixed .ncua-page-title__page-header {
+  padding: 12px 40px;
+}
+.ncua-page-title__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-page-title__header--has-breadcrumb {
+  align-items: flex-end;
+}
+.ncua-page-title__container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+  min-width: 0;
+}
+.ncua-page-title--fixed .ncua-page-title__container {
+  gap: 8px;
+}
+.ncua-page-title__title-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+}
+.ncua-page-title__title-row .ncua-page-title__title {
+  font-size: var(--font-size-display-xs);
+  font-weight: var(--font-weights-commerce-sans-2);
+  line-height: var(--line-heights-display-xs);
+  color: var(--gray-700);
+  margin: 0;
+}
+.ncua-page-title__title-row .ncua-page-title__title:first-child {
+  margin: 0;
+}
+.ncua-page-title__breadcrumb {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+.ncua-page-title__breadcrumb-item {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.333;
+  color: var(--gray-400);
+}
+.ncua-page-title__breadcrumb-item a {
+  color: inherit;
+  text-decoration: none;
+}
+.ncua-page-title__breadcrumb-item a:hover {
+  text-decoration: underline;
+}
+.ncua-page-title__breadcrumb-separator {
+  width: 16px;
+  height: 16px;
+  color: var(--gray-200);
+  flex-shrink: 0;
+}
+.ncua-page-title__breadcrumb-current {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.333;
+  color: var(--gray-600);
+}
+.ncua-page-title__back-btn {
+  flex-shrink: 0;
+}
+.ncua-page-title__guide-btn {
+  display: flex;
+  align-items: center;
+}
+.ncua-page-title__actions {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
 .flatpickr-calendar {
   background: transparent;
   opacity: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",