@ncds/ui-admin 0.0.20 → 0.0.22

package/dist/cjs/index.js

@@ -14,6 +14,17 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
+var _breadcrumb = require("./src/components/breadcrumb");
+Object.keys(_breadcrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadcrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _breadcrumb[key];
+    }
+  });
+});
 var _button = require("./src/components/button");
 Object.keys(_button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -58,6 +69,17 @@ Object.keys(_datePicker).forEach(function (key) {
     }
   });
 });
+var _dropdown = require("./src/components/dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});
 var _input = require("./src/components/input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -146,6 +168,17 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
+var _tag = require("./src/components/tag");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
 var _toggle = require("./src/components/toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/breadcrumb/BreadCrumb.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BreadCrumb = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var BreadcrumbItem = function (_a) {
+  var href = _a.href,
+    children = _a.children;
+  var ElementType = href ? 'a' : 'span';
+  return (0, _jsxRuntime.jsx)(ElementType, __assign({
+    href: href,
+    className: "ncua-breadcrumb__item"
+  }, {
+    children: children
+  }));
+};
+var BreadCrumb = function (_a) {
+  var items = _a.items,
+    className = _a.className;
+  if (!items || items.length === 0) return null;
+  var renderItem = function (item, index) {
+    var isLast = index === items.length - 1;
+    var content = index === 0 ? (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: "home-01",
+      width: 16,
+      height: 16,
+      color: "gray500"
+    }) : item.label;
+    return (0, _jsxRuntime.jsx)("li", __assign({
+      className: (0, _classnames.default)('ncua-breadcrumb__list-item', {
+        'ncua-breadcrumb__list-item--active': isLast
+      })
+    }, {
+      children: (0, _jsxRuntime.jsx)(BreadcrumbItem, __assign({
+        href: !isLast ? item.href : undefined
+      }, {
+        children: content
+      }))
+    }), index);
+  };
+  return (0, _jsxRuntime.jsx)("nav", __assign({
+    "aria-label": "breadcrumb",
+    className: (0, _classnames.default)('ncua-breadcrumb', className)
+  }, {
+    children: (0, _jsxRuntime.jsx)("ol", __assign({
+      className: "ncua-breadcrumb__list"
+    }, {
+      children: items.map(renderItem)
+    }))
+  }));
+};
+exports.BreadCrumb = BreadCrumb;

package/dist/cjs/src/components/breadcrumb/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _BreadCrumb = require("./BreadCrumb");
+Object.keys(_BreadCrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BreadCrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BreadCrumb[key];
+    }
+  });
+});

package/dist/cjs/src/components/date-picker/index.js

@@ -24,4 +24,15 @@ Object.keys(_RangeDatePicker).forEach(function (key) {
       return _RangeDatePicker[key];
     }
   });
+});
+var _utils = require("./utils");
+Object.keys(_utils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _utils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _utils[key];
+    }
+  });
 });

package/dist/cjs/src/components/index.js

@@ -14,6 +14,17 @@ Object.keys(_badge).forEach(function (key) {
     }
   });
 });
+var _breadcrumb = require("./breadcrumb");
+Object.keys(_breadcrumb).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breadcrumb[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _breadcrumb[key];
+    }
+  });
+});
 var _button = require("./button");
 Object.keys(_button).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -58,6 +69,17 @@ Object.keys(_datePicker).forEach(function (key) {
     }
   });
 });
+var _dropdown = require("./dropdown");
+Object.keys(_dropdown).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dropdown[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dropdown[key];
+    }
+  });
+});
 var _input = require("./input");
 Object.keys(_input).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -124,6 +146,17 @@ Object.keys(_spinner).forEach(function (key) {
     }
   });
 });
+var _tag = require("./tag");
+Object.keys(_tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tag[key];
+    }
+  });
+});
 var _toggle = require("./toggle");
 Object.keys(_toggle).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/components/tag/Tag.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Tag = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _color = require("../../../constant/color");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var __assign = void 0 && (void 0).__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var Tag = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    icon = _a.icon,
+    text = _a.text,
+    count = _a.count,
+    close = _a.close,
+    onButtonClick = _a.onButtonClick;
+  var closeSize = {
+    sm: 14,
+    md: 16
+  };
+  return (0, _jsxRuntime.jsxs)("span", __assign({
+    className: (0, _classnames.default)('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
+    })
+  }, {
+    children: [icon && icon.name !== 'dot' && (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+      name: icon.name,
+      width: 16,
+      height: 16,
+      color: icon.color
+    }), (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-tag__text"
+    }, {
+      children: text
+    })), count && (0, _jsxRuntime.jsx)("span", __assign({
+      className: "ncua-tag__count"
+    }, {
+      children: count
+    })), close && (0, _jsxRuntime.jsx)("button", __assign({
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick
+    }, {
+      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.default, {
+        name: "x-close",
+        color: _color.COLOR.gray300,
+        width: closeSize[size],
+        height: closeSize[size]
+      })
+    }))]
+  }));
+};
+exports.Tag = Tag;

package/dist/cjs/src/components/tag/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _Tag = require("./Tag");
+Object.keys(_Tag).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tag[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tag[key];
+    }
+  });
+});

package/dist/esm/index.js

@@ -1,8 +1,10 @@
 export * from './src/components/badge';
+export * from './src/components/breadcrumb';
 export * from './src/components/button';
 export * from './src/components/carousel';
 export * from './src/components/checkbox';
 export * from './src/components/date-picker';
+export * from './src/components/dropdown';
 export * from './src/components/input';
 export * from './src/components/pagination';
 export * from './src/components/radio';
@@ -11,6 +13,7 @@ export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
 export * from './src/components/spinner';
+export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/esm/src/components/breadcrumb/BreadCrumb.js

@@ -0,0 +1,59 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+var BreadcrumbItem = function (_a) {
+  var href = _a.href,
+    children = _a.children;
+  var ElementType = href ? 'a' : 'span';
+  return _jsx(ElementType, __assign({
+    href: href,
+    className: "ncua-breadcrumb__item"
+  }, {
+    children: children
+  }));
+};
+export var BreadCrumb = function (_a) {
+  var items = _a.items,
+    className = _a.className;
+  if (!items || items.length === 0) return null;
+  var renderItem = function (item, index) {
+    var isLast = index === items.length - 1;
+    var content = index === 0 ? _jsx(Icon, {
+      name: "home-01",
+      width: 16,
+      height: 16,
+      color: "gray500"
+    }) : item.label;
+    return _jsx("li", __assign({
+      className: classNames('ncua-breadcrumb__list-item', {
+        'ncua-breadcrumb__list-item--active': isLast
+      })
+    }, {
+      children: _jsx(BreadcrumbItem, __assign({
+        href: !isLast ? item.href : undefined
+      }, {
+        children: content
+      }))
+    }), index);
+  };
+  return _jsx("nav", __assign({
+    "aria-label": "breadcrumb",
+    className: classNames('ncua-breadcrumb', className)
+  }, {
+    children: _jsx("ol", __assign({
+      className: "ncua-breadcrumb__list"
+    }, {
+      children: items.map(renderItem)
+    }))
+  }));
+};

package/dist/esm/src/components/breadcrumb/index.js

@@ -0,0 +1 @@
+export * from './BreadCrumb';

package/dist/esm/src/components/date-picker/index.js

@@ -1,2 +1,3 @@
 export * from './DatePicker';
-export * from './RangeDatePicker';
+export * from './RangeDatePicker';
+export * from './utils';

package/dist/esm/src/components/index.js

@@ -1,13 +1,16 @@
 export * from './badge';
+export * from './breadcrumb';
 export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
+export * from './dropdown';
 export * from './input';
 export * from './pagination';
 export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tag';
 export * from './toggle';
 export * from './tooltip';

package/dist/esm/src/components/tag/Tag.js

@@ -0,0 +1,58 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { COLOR } from '../../../constant/color';
+export var Tag = function (_a) {
+  var _b = _a.size,
+    size = _b === void 0 ? 'sm' : _b,
+    icon = _a.icon,
+    text = _a.text,
+    count = _a.count,
+    close = _a.close,
+    onButtonClick = _a.onButtonClick;
+  var closeSize = {
+    sm: 14,
+    md: 16
+  };
+  return _jsxs("span", __assign({
+    className: classNames('ncua-tag', "ncua-tag--".concat(size), {
+      'ncua-tag--dot': (icon === null || icon === void 0 ? void 0 : icon.name) === 'dot'
+    })
+  }, {
+    children: [icon && icon.name !== 'dot' && _jsx(Icon, {
+      name: icon.name,
+      width: 16,
+      height: 16,
+      color: icon.color
+    }), _jsx("span", __assign({
+      className: "ncua-tag__text"
+    }, {
+      children: text
+    })), count && _jsx("span", __assign({
+      className: "ncua-tag__count"
+    }, {
+      children: count
+    })), close && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-tag__close",
+      onClick: onButtonClick
+    }, {
+      children: _jsx(Icon, {
+        name: "x-close",
+        color: COLOR.gray300,
+        width: closeSize[size],
+        height: closeSize[size]
+      })
+    }))]
+  }));
+};

package/dist/esm/src/components/tag/index.js

@@ -0,0 +1 @@
+export * from './Tag';

package/dist/types/index.d.ts

@@ -1,8 +1,10 @@
 export * from './src/components/badge';
+export * from './src/components/breadcrumb';
 export * from './src/components/button';
 export * from './src/components/carousel';
 export * from './src/components/checkbox';
 export * from './src/components/date-picker';
+export * from './src/components/dropdown';
 export * from './src/components/input';
 export * from './src/components/pagination';
 export * from './src/components/radio';
@@ -11,6 +13,7 @@ export * from './src/components/shared/hintText';
 export * from './src/components/shared/label';
 export * from './src/components/shared';
 export * from './src/components/spinner';
+export * from './src/components/tag';
 export * from './src/components/toggle';
 export * from './src/components/tooltip';
 export * from './src/components';

package/dist/types/src/components/breadcrumb/BreadCrumb.d.ts

@@ -0,0 +1,10 @@
+export interface BreadcrumbItemProps {
+    href?: string;
+    label: string;
+}
+export interface BreadcrumbProps {
+    items: BreadcrumbItemProps[];
+    className?: string;
+}
+export declare const BreadCrumb: ({ items, className }: BreadcrumbProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=BreadCrumb.d.ts.map

package/dist/types/src/components/breadcrumb/index.d.ts

@@ -0,0 +1,2 @@
+export * from './BreadCrumb';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, MutableRefObject, ReactNode, RefCallback } from 'react';
+import { ChangeEvent, MutableRefObject, ReactNode, RefCallback } from 'react';
 import { CheckboxInputProps } from './CheckboxInput';
 export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
     text?: ReactNode;
@@ -6,5 +6,5 @@ export interface CheckboxProps extends Omit<CheckboxInputProps, 'type'> {
     checkboxRef?: RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const Checkbox: FC<CheckboxProps>;
+export declare const Checkbox: ({ size, indeterminate, text, supportText, disabled, checked, className, checkboxRef, onChange, ...props }: CheckboxProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/types/src/components/date-picker/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DatePicker';
 export * from './RangeDatePicker';
+export * from './utils';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts

@@ -1,14 +1,17 @@
 export * from './badge';
+export * from './breadcrumb';
 export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
+export * from './dropdown';
 export * from './input';
 export * from './pagination';
 export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tag';
 export * from './toggle';
 export * from './tooltip';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, FC, MutableRefObject, ReactNode, RefCallback } from 'react';
+import { ChangeEvent, MutableRefObject, ReactNode, RefCallback } from 'react';
 import { RadioInputProps } from './RadioInput';
 export interface RadioProps extends Omit<RadioInputProps, 'type'> {
     text?: ReactNode;
@@ -6,5 +6,5 @@ export interface RadioProps extends Omit<RadioInputProps, 'type'> {
     radioRef?: RefCallback<HTMLInputElement> | MutableRefObject<HTMLInputElement | null>;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const Radio: FC<RadioProps>;
+export declare const Radio: ({ size, text, supportText, disabled, checked, className, radioRef, onChange, ...props }: RadioProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Radio.d.ts.map

package/dist/types/src/components/tag/Tag.d.ts

@@ -0,0 +1,19 @@
+import { IconName } from '@ncds/ui-admin-icon';
+import { FC, MouseEventHandler } from 'react';
+import { COLOR } from '../../../constant/color';
+import { Size } from '../../../constant/size';
+type TagIcon = {
+    name: IconName | 'dot';
+    color?: keyof typeof COLOR;
+};
+interface TagProps {
+    size?: Extract<Size, 'sm' | 'md'>;
+    icon?: TagIcon;
+    text: string;
+    count?: string;
+    close?: boolean;
+    onButtonClick?: MouseEventHandler<HTMLButtonElement>;
+}
+export declare const Tag: FC<TagProps>;
+export {};
+//# sourceMappingURL=Tag.d.ts.map

package/dist/types/src/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tag';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/toggle/Toggle.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ComponentPropsWithRef, FC } from 'react';
+import { ChangeEvent, ComponentPropsWithRef } from 'react';
 export interface ToggleProps extends Omit<ComponentPropsWithRef<'input'>, 'size'> {
     size?: 'sm' | 'md';
     text?: string;
@@ -7,5 +7,5 @@ export interface ToggleProps extends Omit<ComponentPropsWithRef<'input'>, 'size'
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
     className?: string;
 }
-export declare const Toggle: FC<ToggleProps>;
+export declare const Toggle: ({ size, text, supportText, disabled, onChange, className, ...props }: ToggleProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Toggle.d.ts.map

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

@@ -68,8 +68,6 @@
   --shadow-xl: 0px 20px 24px -4px #10182814, 0px 8px 8px -4px #10182808;
   --shadow-2xl: 0px 24px 48px -12px #1018282e;
   --shadow-3xl: 0px 32px 64px -12px #10182824;
-  --box-shadow-xs: 0px 1px 2px 0px #1018280d;
-  --box-shadow-lg: 0px 4px 6px -2px #10182808, 0px 12px 16px -4px #10182814;
   --font-families-commerce-sans: Commerce Sans;
   --line-heights-display-xl: 76px;
   --line-heights-display-lg: 60px;
@@ -783,14 +781,13 @@ button {
   cursor: pointer;
   font-size: var(--font-size-xs);
   font-weight: var(--font-weights-commerce-sans-1);
-  color: var(--gray-900);
-  box-shadow: var(--box-shadow-xs);
+  color: var(--gray-700);
+  box-shadow: var(--shadow-xs);
 }
 .ncua-dropdown__menu {
   position: absolute;
   top: calc(100% + 4px);
   left: 0;
-  z-index: 1000;
   min-width: 240px;
   background-color: var(--base-white);
   border-radius: 8px;
@@ -814,12 +811,11 @@ button {
 .ncua-dropdown__header .ncua-dropdown__avatar {
   width: 32px;
   height: 32px;
-  border-radius: 200px;
+  border-radius: 50%;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--gray-900);
 }
 .ncua-dropdown__header .ncua-dropdown__avatar img {
   width: 100%;
@@ -1282,6 +1278,79 @@ button {
   transform: translateY(3px);
 }
 
+.ncua-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+  border: 1px solid var(--gray-200);
+  color: var(--gray-500);
+  line-height: 1.5;
+  font-weight: var(--font-weights-commerce-sans-1);
+  background-color: var(--base-white);
+  vertical-align: top;
+  overflow: hidden;
+}
+.ncua-tag--sm {
+  font-size: var(--font-size-xxs);
+  padding: 2px 8px;
+  line-height: 14px;
+}
+.ncua-tag--md {
+  font-size: var(--font-size-sm);
+  padding: 1px 9px;
+  line-height: 22px;
+}
+.ncua-tag__text {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+}
+.ncua-tag > svg {
+  margin-right: 4px;
+}
+.ncua-tag--dot .ncua-tag__text {
+  position: relative;
+  padding-left: 12px;
+}
+.ncua-tag--dot .ncua-tag__text::before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  content: "";
+  transform: translateY(-50%);
+  width: 6px;
+  height: 6px;
+  background-color: var(--primary-red-500);
+  border-radius: 50%;
+}
+.ncua-tag__count {
+  display: inline-flex;
+  align-items: center;
+  min-width: 16px;
+  height: 16px;
+  margin-left: 6px;
+  margin-right: -5px;
+  padding: 0 5px;
+  background-color: var(--gray-100);
+  border-radius: 3px;
+  text-align: center;
+}
+.ncua-tag__count + .ncua-tag__close {
+  margin-left: 6px;
+}
+.ncua-tag__close {
+  margin-left: 3px;
+  margin-right: -5px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background-color: transparent;
+  border: none;
+}
+
 .ncua-tooltip {
   position: relative;
   font-size: 12px;
@@ -1863,6 +1932,8 @@ button {
 .ncua-date-picker .flatpickr-calendar {
   max-height: none;
   padding-block-start: 12px;
+  border-radius: 8px;
+  box-shadow: 1px 0 0 var(--gray-200), -1px 0 0 var(--gray-200), 0 1px 0 var(--gray-200), 0 -1px 0 var(--gray-200), 0 3px 13px rgba(0, 0, 0, 0.08);
 }
 .ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
   content: none;
@@ -1891,6 +1962,15 @@ button {
   width: 36px;
   height: 36px;
 }
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month:hover {
+  border-radius: 6px;
+  background-color: var(--gray-50);
+}
+.ncua-date-picker .flatpickr-months .flatpickr-prev-month:hover svg,
+.ncua-date-picker .flatpickr-months .flatpickr-next-month:hover svg {
+  fill: initial;
+}
 .ncua-date-picker .flatpickr-months .flatpickr-month {
   overflow: visible;
   flex: none;
@@ -1988,6 +2068,9 @@ button {
 .ncua-date-picker--disabled .ncua-date-picker__input {
   color: var(--gray-300);
 }
+.ncua-date-picker--md .flatpickr-current-month .flatpickr-monthDropdown-months, .ncua-date-picker--md .numInputWrapper .cur-year {
+  font-size: var(--font-size-md);
+}
 
 .ncua-range-date-picker {
   display: inline-flex;
@@ -2050,6 +2133,63 @@ button {
   height: 16px;
 }
 
+.ncua-breadcrumb {
+  display: flex;
+  align-items: center;
+  font-size: var(--font-size-sm);
+}
+.ncua-breadcrumb__list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 20px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.ncua-breadcrumb__list-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding: 4px 8px;
+  color: var(--gray-400);
+  font-weight: var(--font-weights-commerce-sans-1);
+  cursor: pointer;
+}
+.ncua-breadcrumb__list-item--active {
+  color: var(--gray-600);
+}
+.ncua-breadcrumb__list-item:hover:not(:first-child):not(:last-child) {
+  color: var(--gray-600);
+  background-color: var(--gray-100);
+  border-radius: 4px;
+}
+.ncua-breadcrumb__list-item:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  right: -18px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"%3E%3Cpath d="M6 12L10 8L6 4" stroke="%23D3D4D8" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/%3E%3C/svg%3E');
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.ncua-breadcrumb__item {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+.ncua-breadcrumb__item:hover {
+  color: inherit;
+  text-decoration: none;
+}
+
 .ncua-badge {
   display: inline-flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -62,7 +62,7 @@
   "dependencies": {
     "@ncds/types-common": "^1.0.0",
     "@ncds/types-layout": "^1.0.0",
-    "@ncds/ui-admin-icon": "0.0.15",
+    "@ncds/ui-admin-icon": "0.0.16",
     "classnames": "^2.3.2",
     "react-flatpickr": "^4.0.10",
     "swiper": "^11.1.1"