@sellmate/design-system 1.17.0 → 1.19.0

package/dist/collection/components/assets/index.js

@@ -9,6 +9,7 @@ import { ArrowUp } from "./ArrowUp";
 import { AttachFile } from "./AttachFile";
 import { Barcode } from "./Barcode";
 import { Bell } from "./Bell";
+import { Bill } from "./Bill";
 import { Board } from "./Board";
 import { Box } from "./Box";
 import { Camera } from "./Camera";
@@ -33,8 +34,11 @@ import { ClockFill } from "./ClockFill";
 import { ClockOutline } from "./ClockOutline";
 import { Close } from "./Close";
 import { Copy } from "./Copy";
+import { Coupon } from "./Coupon";
 import { Dashboard } from "./Dashboard";
 import { DateIcon } from "./Date";
+import { Delete } from "./Delete";
+import { Dot } from "./Dot";
 import { Download } from "./Download";
 import { Drag } from "./Drag";
 import { Edit } from "./Edit";
@@ -47,10 +51,12 @@ import { History } from "./History";
 import { ImageFill } from "./ImageFill";
 import { ImageOutline } from "./ImageOutline";
 import { Inline } from "./Inline";
+import { Launcher } from "./Launcher";
 import { Line } from "./Line";
 import { Location } from "./Location";
 import { Logout } from "./Logout";
 import { Minus } from "./Minus";
+import { Monitor } from "./Monitor";
 import { New } from "./New";
 import { NotificationFill } from "./NotificationFill";
 import { NotificationOutline } from "./NotificationOutline";
@@ -67,7 +73,10 @@ import { Row } from "./Row";
 import { Save } from "./Save";
 import { Search } from "./Search";
 import { Setting } from "./Setting";
+import { Shield } from "./Shield";
+import { Sidebar } from "./Sidebar";
 import { Star } from "./Star";
+import { Store } from "./Store";
 import { Synchronize } from "./Synchronize";
 import { Updown } from "./Updown";
 import { User } from "./User";
@@ -90,6 +99,7 @@ export const Icons = {
     attachFile: AttachFile,
     barcode: Barcode,
     bell: Bell,
+    bill: Bill,
     board: Board,
     box: Box,
     camera: Camera,
@@ -114,8 +124,11 @@ export const Icons = {
     clockOutline: ClockOutline,
     close: Close,
     copy: Copy,
+    coupon: Coupon,
     dashboard: Dashboard,
     date: DateIcon,
+    delete: Delete,
+    dot: Dot,
     download: Download,
     drag: Drag,
     edit: Edit,
@@ -128,10 +141,12 @@ export const Icons = {
     imageFill: ImageFill,
     imageOutline: ImageOutline,
     inline: Inline,
+    launcher: Launcher,
     line: Line,
     location: Location,
     logout: Logout,
     minus: Minus,
+    monitor: Monitor,
     new: New,
     notificationFill: NotificationFill,
     notificationOutline: NotificationOutline,
@@ -148,7 +163,10 @@ export const Icons = {
     save: Save,
     search: Search,
     setting: Setting,
+    shield: Shield,
+    sidebar: Sidebar,
     star: Star,
+    store: Store,
     synchronize: Synchronize,
     updown: Updown,
     user: User,

package/dist/collection/components/sd-button/sd-button.js

@@ -143,7 +143,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",
@@ -167,7 +167,7 @@ export class SdButton {
                 "mutable": false,
                 "complexType": {
                     "original": "IconName",
-                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"dashboard\" | \"date\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"star\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
+                    "resolved": "\"add\" | \"alert\" | \"alignKorean\" | \"archive\" | \"arrowDown\" | \"arrowLeft\" | \"arrowRight\" | \"arrowUp\" | \"attachFile\" | \"barcode\" | \"bell\" | \"bill\" | \"board\" | \"box\" | \"camera\" | \"cancelFill\" | \"cancelOutline\" | \"caretDown\" | \"caretLeft\" | \"caretRight\" | \"caretUp\" | \"check\" | \"checkFill\" | \"checkOutline\" | \"checkboxCheck\" | \"checkboxIndeterminate\" | \"chevronDown\" | \"chevronLeft\" | \"chevronLeftEnd\" | \"chevronRight\" | \"chevronRightEnd\" | \"chevronUp\" | \"clockFill\" | \"clockOutline\" | \"close\" | \"copy\" | \"coupon\" | \"dashboard\" | \"date\" | \"delete\" | \"dot\" | \"download\" | \"drag\" | \"edit\" | \"etc\" | \"event\" | \"global\" | \"helpFill\" | \"helpOutline\" | \"history\" | \"imageFill\" | \"imageOutline\" | \"inline\" | \"launcher\" | \"line\" | \"location\" | \"logout\" | \"minus\" | \"monitor\" | \"new\" | \"notificationFill\" | \"notificationOutline\" | \"notion\" | \"outline\" | \"pageEdit\" | \"pageMove\" | \"pdf\" | \"print\" | \"remove\" | \"reset\" | \"robot\" | \"row\" | \"save\" | \"search\" | \"setting\" | \"shield\" | \"sidebar\" | \"star\" | \"store\" | \"synchronize\" | \"updown\" | \"user\" | \"visibilityOff\" | \"visibilityOn\" | \"warehouseFill\" | \"warehouseOutline\" | \"warningFill\" | \"warningOutline\" | \"youtube\" | undefined",
                     "references": {
                         "IconName": {
                             "location": "global",

package/dist/collection/components/sd-chip-input/sd-chip-input.config.js

@@ -1,4 +1,7 @@
 import chipInputTokens from "../../tokens/generated/component.chipInput.json";
+import systemTokens from "../../tokens/generated/system.json";
+import listBoxTokens from "../../tokens/generated/component.listBox.json";
+import listItemTokens from "../../tokens/generated/component.listItem.json";
 const sm = chipInputTokens.chipInput.sm;
 const md = chipInputTokens.chipInput.md;
 export const CHIP_INPUT_SIZE_MAP = {
@@ -46,3 +49,29 @@ export const CHIP_INPUT_RESET = {
     iconColor: '#888888', // TODO: 토큰 반영 후 교체 (grey_65)
     labelColor: '#555555', // TODO: 토큰 반영 후 교체 (grey_70)
 };
+const feedbackSm = systemTokens.typography.feedback.sm.regular;
+export const CHIP_INPUT_MAX_COUNT = {
+    fontSize: `${feedbackSm.fontSize}px`,
+    fontWeight: `${feedbackSm.fontWeight}`,
+    color: chipInputTokens.chipInput.text.placeholder,
+};
+const listItem = listItemTokens.listItem;
+export const CHIP_INPUT_SUGGESTIONS = {
+    radius: `${listBoxTokens.listBox.radius}px`,
+    maxHeight: '260px',
+    itemPaddingY: `${listItem.paddingY}px`,
+    itemPaddingX: `${listItem.paddingLeft.depth1}px`,
+    itemPaddingRight: `${listItem.paddingRight}px`,
+    itemGap: `${listItem.gap}px`,
+    itemFontSize: `${listItem.typography.default.fontSize}px`,
+    itemFontWeight: listItem.typography.default.fontWeight,
+    itemFontWeightSelected: listItem.typography.selected.fontWeight,
+    itemLineHeight: `${listItem.typography.default.lineHeight}px`,
+    itemFontFamily: listItem.typography.default.fontFamily,
+    itemColor: listItem.content.default,
+    itemColorHover: listItem.content.hover,
+    itemBgHover: listItem.bg.hover,
+    emptyColor: '#888888',
+    emptyFontSize: '12px',
+    emptyLineHeight: '20px',
+};

package/dist/collection/components/sd-chip-input/sd-chip-input.css

@@ -4,6 +4,7 @@ sd-chip-input {
 sd-chip-input .sd-chip-input {
   position: relative;
   width: 100%;
+  isolation: isolate;
   min-height: var(--sd-chip-input-min-height);
   display: flex;
   flex-flow: row wrap;
@@ -25,6 +26,13 @@ sd-chip-input .sd-chip-input__divider {
   background-color: var(--sd-chip-input-divider-color);
   flex-shrink: 0;
 }
+sd-chip-input .sd-chip-input__max-count {
+  font-size: var(--sd-chip-input-max-count-font-size);
+  font-weight: var(--sd-chip-input-max-count-font-weight);
+  color: var(--sd-chip-input-max-count-color);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
 sd-chip-input .sd-chip-input__field {
   flex: 0 0 auto;
   display: inline-grid;
@@ -89,4 +97,46 @@ sd-chip-input .sd-chip-input__input[disabled] {
 }
 sd-chip-input .sd-chip-input__input::placeholder {
   color: var(--sd-chip-input-placeholder-color);
+}
+sd-chip-input .sd-chip-input__suggestions {
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  background: white;
+  border-radius: var(--sd-chip-input-suggestions-radius);
+  box-shadow: 2px 2px 12px 2px rgba(0, 0, 0, 0.1);
+  max-height: var(--sd-chip-input-suggestions-max-height);
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  outline: none;
+}
+sd-chip-input .sd-chip-input__suggestion-item {
+  display: flex;
+  align-items: center;
+  gap: var(--sd-chip-input-suggestion-gap);
+  padding: var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-right) var(--sd-chip-input-suggestion-padding-y) var(--sd-chip-input-suggestion-padding-x);
+  font-size: var(--sd-chip-input-suggestion-font-size);
+  line-height: var(--sd-chip-input-suggestion-line-height);
+  font-weight: var(--sd-chip-input-suggestion-font-weight);
+  font-family: var(--sd-chip-input-suggestion-font-family);
+  color: var(--sd-chip-input-suggestion-color);
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+sd-chip-input .sd-chip-input__suggestion-item--active {
+  background: var(--sd-chip-input-suggestion-bg-hover);
+  color: var(--sd-chip-input-suggestion-color-hover);
+  font-weight: var(--sd-chip-input-suggestion-font-weight-selected);
+}
+sd-chip-input .sd-chip-input__suggestions-empty {
+  padding: 12px;
+  text-align: center;
+  font-size: var(--sd-chip-input-suggestions-empty-font-size);
+  line-height: var(--sd-chip-input-suggestions-empty-line-height);
+  font-family: var(--sd-chip-input-suggestion-font-family);
+  color: var(--sd-chip-input-suggestions-empty-color);
 }