@ncds/ui-admin 1.0.2 → 1.1.0

package/dist/cjs/src/components/button/ButtonGroup.js

@@ -32,16 +32,16 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 var svgSize = {
-  xs: 12,
+  xxs: 12,
+  xs: 16,
   sm: 16,
-  md: 16,
-  lg: 20
+  md: 20
 };
 var dotSize = {
+  xxs: 'sm',
   xs: 'sm',
-  sm: 'sm',
-  md: 'md',
-  lg: 'md'
+  sm: 'md',
+  md: 'md'
 };
 var ButtonGroup = function (_a) {
   var children = _a.children,
@@ -49,7 +49,7 @@ var ButtonGroup = function (_a) {
     _b = _a.hasBorder,
     hasBorder = _b === void 0 ? true : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'lg' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     _d = _a.onlyIcon,
     onlyIcon = _d === void 0 ? false : _d,
     _e = _a.disabled,
@@ -78,7 +78,7 @@ ButtonGroup.Item = function (_a) {
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'xs' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,

package/dist/cjs/src/components/checkbox/Checkbox.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var Checkbox = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     text = _a.text,

package/dist/cjs/src/components/checkbox/CheckboxInput.js

@@ -31,7 +31,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
  */
 var CheckboxInput = exports.CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     disabled = _a.disabled,

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

@@ -34,7 +34,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
     _c = _a.size,
-    size = _c === void 0 ? 'sm' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
@@ -50,7 +50,7 @@ var DatePicker = exports.DatePicker = /*#__PURE__*/(0, _react.forwardRef)(functi
     onChange: onChangeDateHandler,
     allowInvalidPreload: true
   }, datePickerOptions);
-  var svgSize = size === 'sm' ? 14 : 16;
+  var svgSize = size === 'xs' ? 14 : 16;
   return (0, _jsxRuntime.jsxs)("div", __assign({
     className: (0, _classnames.default)('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled

package/dist/cjs/src/components/input/InputBase.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.InputBase = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = _interopRequireDefault(require("@ncds/ui-admin-icon"));
-var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
 var _color = require("../../../constant/color");
-var _Label = require("../shared/label/Label");
 var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,15 +32,15 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var validationSvgSize = {
   xs: 14,
-  md: 16
+  sm: 16
 };
 var generalSvgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 var InputBase = exports.InputBase = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     required = _a.required,
     label = _a.label,
     hintText = _a.hintText,

package/dist/cjs/src/components/input/PasswordInput.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PasswordInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _InputBase = require("./InputBase");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _InputBase = require("./InputBase");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -30,11 +30,11 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var svgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 var PasswordInput = exports.PasswordInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
   var inputRef = (0, _react.useRef)(null);
   var _c = (0, _react.useState)(false),

package/dist/cjs/src/components/input/Textarea.js

@@ -7,8 +7,8 @@ exports.Textarea = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
-var _Label = require("../shared/label/Label");
 var _HintText = require("../shared/hintText/HintText");
+var _Label = require("../shared/label/Label");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 var __assign = void 0 && (void 0).__assign || function () {
   __assign = Object.assign || function (t) {
@@ -32,7 +32,7 @@ var Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)(function (
   var _b;
   var className = _a.className,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,

package/dist/cjs/src/components/radio/Radio.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var Radio = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     text = _a.text,
     supportText = _a.supportText,
     disabled = _a.disabled,

package/dist/cjs/src/components/radio/RadioInput.js

@@ -28,7 +28,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 };
 var RadioInput = exports.RadioInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     disabled = _a.disabled,
     className = _a.className,
     _c = _a.destructive,

package/dist/cjs/src/components/tab/HorizontalTab.js

@@ -23,13 +23,14 @@ var __assign = void 0 && (void 0).__assign || function () {
 var HorizontalTab = function (_a) {
   var _b = _a.type,
     type = _b === void 0 ? 'button-primary' : _b,
-    size = _a.size,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
     onClick = _a.onClick,
-    _c = _a.fullWidth,
-    fullWidth = _c === void 0 ? false : _c,
-    _d = _a.menus,
-    menus = _d === void 0 ? [] : _d;
+    _d = _a.fullWidth,
+    fullWidth = _d === void 0 ? false : _d,
+    _e = _a.menus,
+    menus = _e === void 0 ? [] : _e;
   var getTabGap = function (type) {
     var _a;
     var gap = {

package/dist/cjs/src/components/tab/TabButton.js

@@ -29,7 +29,7 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
 var TabButton = function (_a) {
   var label = _a.label,
     _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
     type = _a.type,
     _c = _a.isActive,

package/dist/cjs/src/components/tab/VerticalTab.js

@@ -57,7 +57,7 @@ var VerticalTab = function (_a) {
         badgeInfo: menu.badgeInfo,
         isActive: isActive,
         tabButtonType: type,
-        size: 'sm',
+        size: 'md',
         onClick: function () {
           var _a;
           return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');

package/dist/esm/src/components/button/ButtonGroup.js

@@ -23,16 +23,16 @@ import React, { createElement } from 'react';
 import { COLOR } from '../../../constant/color';
 import { Dot } from '../dot';
 var svgSize = {
-  xs: 12,
+  xxs: 12,
+  xs: 16,
   sm: 16,
-  md: 16,
-  lg: 20
+  md: 20
 };
 var dotSize = {
+  xxs: 'sm',
   xs: 'sm',
-  sm: 'sm',
-  md: 'md',
-  lg: 'md'
+  sm: 'md',
+  md: 'md'
 };
 export var ButtonGroup = function (_a) {
   var children = _a.children,
@@ -40,7 +40,7 @@ export var ButtonGroup = function (_a) {
     _b = _a.hasBorder,
     hasBorder = _b === void 0 ? true : _b,
     _c = _a.size,
-    size = _c === void 0 ? 'lg' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     _d = _a.onlyIcon,
     onlyIcon = _d === void 0 ? false : _d,
     _e = _a.disabled,
@@ -68,7 +68,7 @@ ButtonGroup.Item = function (_a) {
     as = _c === void 0 ? 'button' : _c,
     label = _a.label,
     _d = _a.size,
-    size = _d === void 0 ? 'md' : _d,
+    size = _d === void 0 ? 'xs' : _d,
     onlyIcon = _a.onlyIcon,
     icon = _a.icon,
     disabled = _a.disabled,

package/dist/esm/src/components/checkbox/Checkbox.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { CheckboxInput } from './CheckboxInput';
 export var Checkbox = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     text = _a.text,

package/dist/esm/src/components/checkbox/CheckboxInput.js

@@ -24,7 +24,7 @@ import { forwardRef } from 'react';
  */
 export var CheckboxInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     _c = _a.indeterminate,
     indeterminate = _c === void 0 ? false : _c,
     disabled = _a.disabled,

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

@@ -27,7 +27,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     shouldFocus = _b === void 0 ? true : _b,
     currentDate = _a.currentDate,
     _c = _a.size,
-    size = _c === void 0 ? 'sm' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     onChangeDate = _a.onChangeDate,
     datePickerOptions = _a.datePickerOptions,
     attrs = __rest(_a, ["shouldFocus", "currentDate", "size", "onChangeDate", "datePickerOptions"]);
@@ -43,7 +43,7 @@ export var DatePicker = /*#__PURE__*/forwardRef(function (_a, ref) {
     onChange: onChangeDateHandler,
     allowInvalidPreload: true
   }, datePickerOptions);
-  var svgSize = size === 'sm' ? 14 : 16;
+  var svgSize = size === 'xs' ? 14 : 16;
   return _jsxs("div", __assign({
     className: classNames('ncua-date-picker', "ncua-date-picker--".concat(size), {
       'ncua-date-picker--disabled': attrs.disabled

package/dist/esm/src/components/input/InputBase.js

@@ -18,22 +18,22 @@ var __rest = this && this.__rest || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import Icon from '@ncds/ui-admin-icon';
-import { forwardRef } from 'react';
 import classNames from 'classnames';
+import { forwardRef } from 'react';
 import { COLOR } from '../../../constant/color';
-import { Label } from '../shared/label/Label';
 import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
 var validationSvgSize = {
   xs: 14,
-  md: 16
+  sm: 16
 };
 var generalSvgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 export var InputBase = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     required = _a.required,
     label = _a.label,
     hintText = _a.hintText,

package/dist/esm/src/components/input/PasswordInput.js

@@ -17,17 +17,17 @@ var __rest = this && this.__rest || function (s, e) {
   return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef, useState } from 'react';
-import { InputBase } from './InputBase';
 import { Eye, EyeOff } from '@ncds/ui-admin-icon';
 import classNames from 'classnames';
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import { InputBase } from './InputBase';
 var svgSize = {
   xs: 14,
-  md: 20
+  sm: 20
 };
 export var PasswordInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     props = __rest(_a, ["size"]);
   var inputRef = useRef(null);
   var _c = useState(false),

package/dist/esm/src/components/input/Textarea.js

@@ -19,13 +19,13 @@ var __rest = this && this.__rest || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef, useEffect, useRef, useState } from 'react';
-import { Label } from '../shared/label/Label';
 import { HintText } from '../shared/hintText/HintText';
+import { Label } from '../shared/label/Label';
 export var Textarea = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b;
   var className = _a.className,
     _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
+    size = _c === void 0 ? 'xs' : _c,
     label = _a.label,
     required = _a.required,
     disabled = _a.disabled,

package/dist/esm/src/components/radio/Radio.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { RadioInput } from './RadioInput';
 export var Radio = function (_a) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     text = _a.text,
     supportText = _a.supportText,
     disabled = _a.disabled,

package/dist/esm/src/components/radio/RadioInput.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { forwardRef } from 'react';
 export var RadioInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _b = _a.size,
-    size = _b === void 0 ? 'sm' : _b,
+    size = _b === void 0 ? 'xs' : _b,
     disabled = _a.disabled,
     className = _a.className,
     _c = _a.destructive,

package/dist/esm/src/components/tab/HorizontalTab.js

@@ -16,13 +16,14 @@ import { TabButton } from './TabButton';
 export var HorizontalTab = function (_a) {
   var _b = _a.type,
     type = _b === void 0 ? 'button-primary' : _b,
-    size = _a.size,
+    _c = _a.size,
+    size = _c === void 0 ? 'sm' : _c,
     activeTab = _a.activeTab,
     onClick = _a.onClick,
-    _c = _a.fullWidth,
-    fullWidth = _c === void 0 ? false : _c,
-    _d = _a.menus,
-    menus = _d === void 0 ? [] : _d;
+    _d = _a.fullWidth,
+    fullWidth = _d === void 0 ? false : _d,
+    _e = _a.menus,
+    menus = _e === void 0 ? [] : _e;
   var getTabGap = function (type) {
     var _a;
     var gap = {

package/dist/esm/src/components/tab/TabButton.js

@@ -22,7 +22,7 @@ import { Badge } from '../badge/Badge';
 export var TabButton = function (_a) {
   var label = _a.label,
     _b = _a.size,
-    size = _b === void 0 ? 'md' : _b,
+    size = _b === void 0 ? 'sm' : _b,
     tabButtonType = _a.tabButtonType,
     type = _a.type,
     _c = _a.isActive,

package/dist/esm/src/components/tab/VerticalTab.js

@@ -50,7 +50,7 @@ export var VerticalTab = function (_a) {
         badgeInfo: menu.badgeInfo,
         isActive: isActive,
         tabButtonType: type,
-        size: 'sm',
+        size: 'md',
         onClick: function () {
           var _a;
           return onClick === null || onClick === void 0 ? void 0 : onClick((_a = menu.id) !== null && _a !== void 0 ? _a : '');

package/dist/types/src/components/button/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
 import React, { ComponentProps } from 'react';
 import { Size } from '../../../constant/size';
 import { SideSlotType } from '../../types/side-slot';
-export type ButtonGroupSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg'>;
+export type ButtonGroupSize = Extract<Size, 'xxs' | 'xs' | 'sm' | 'md'>;
 interface SideCommon {
     position?: 'leading' | 'trailing';
 }

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

@@ -1,7 +1,7 @@
 import { ChangeEvent, ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 export interface CheckboxInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     indeterminate?: boolean;
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;

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

@@ -1,8 +1,8 @@
 import { Options } from 'flatpickr/dist/types/options';
-import { DateTimePickerProps, DateTimePickerHandle } from 'react-flatpickr';
+import { DateTimePickerHandle, DateTimePickerProps } from 'react-flatpickr';
 import { Size } from '../../../constant/size';
 export type DatePickerProps = {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     shouldFocus?: boolean;
     currentDate: string;
     datePickerOptions?: Options;

package/dist/types/src/components/input/InputBase.d.ts

@@ -30,7 +30,7 @@ interface InputBaseCommonProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     required?: boolean;
     label?: string;
     hintText?: string;
-    size?: Extract<Size, 'xs' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     disabled?: boolean;
     validation?: boolean;
     destructive?: boolean;

package/dist/types/src/components/input/Textarea.d.ts

@@ -2,7 +2,7 @@ import { ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 interface TextareaProps extends ComponentPropsWithRef<'textarea'> {
     className?: string;
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     label?: string;
     hintText?: string;
     required?: boolean;

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

@@ -1,7 +1,7 @@
 import { ChangeEvent, ComponentPropsWithRef } from 'react';
 import { Size } from '../../../constant/size';
 export interface RadioInputProps extends Omit<ComponentPropsWithRef<'input'>, 'size' | 'ref'> {
-    size?: Extract<Size, 'sm' | 'md'>;
+    size?: Extract<Size, 'xs' | 'sm'>;
     destructive?: boolean;
     onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
 }

package/dist/types/src/components/tab/HorizontalTab.d.ts

@@ -1,7 +1,7 @@
-import { TabButtonProps, TabType } from './TabButton';
+import { TabButtonProps, TabSize, TabType } from './TabButton';
 export type HorizontalTabProps = {
     type?: Exclude<TabType, 'line-vertical'>;
-    size?: 'xs' | 'sm' | 'md';
+    size?: TabSize;
     activeTab?: string;
     fullWidth?: boolean;
     menus?: Array<TabButtonProps>;

package/dist/types/src/components/tab/TabButton.d.ts

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactNode } from 'react';
 import { BadgeProps } from '../badge/Badge';
-export type TabSize = 'xs' | 'sm' | 'md';
+export type TabSize = 'sm' | 'md' | 'lg';
 export type TabType = 'button-primary' | 'button-white' | 'underline' | 'underline-fill' | 'line-vertical';
 interface CommonProps {
     id?: string;

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

@@ -513,6 +513,10 @@ button {
   box-sizing: border-box;
   background-color: var(--base-white);
   gap: 8px;
+  padding: 4px 16px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-button-group__item[href] {
   text-decoration: none;
@@ -542,67 +546,74 @@ button {
   height: 12px;
   background-color: var(--gray-200);
 }
-.ncua-button-group--xs .ncua-button-group__item {
+.ncua-button-group__item:where(.is-only-icon) {
+  padding: 6px;
+}
+:where(.ncua-button-group.has-border) {
+  border-radius: 6px;
+}
+
+.ncua-button-group--xxs .ncua-button-group__item {
   padding: 4px 12px;
   font-size: var(--font-size-xxxs);
   line-height: var(--line-heights-xxxs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--xs .ncua-button-group__item.is-current, .ncua-button-group--xs .ncua-button-group__item:hover, .ncua-button-group--xs .ncua-button-group__item:focus) {
+:where(.ncua-button-group--xxs .ncua-button-group__item.is-current, .ncua-button-group--xxs .ncua-button-group__item:hover, .ncua-button-group--xxs .ncua-button-group__item:focus) {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--xs .ncua-button-group__item:where(.is-only-icon) {
+.ncua-button-group--xxs .ncua-button-group__item:where(.is-only-icon) {
   padding: 6px;
 }
-:where(.ncua-button-group--xs.has-border) {
+:where(.ncua-button-group--xxs.has-border) {
   border-radius: 4px;
 }
 
-.ncua-button-group--sm .ncua-button-group__item {
+.ncua-button-group--xs .ncua-button-group__item {
   padding: 4px 16px;
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--sm .ncua-button-group__item.is-current, .ncua-button-group--sm .ncua-button-group__item:hover, .ncua-button-group--sm .ncua-button-group__item:focus) {
+:where(.ncua-button-group--xs .ncua-button-group__item.is-current, .ncua-button-group--xs .ncua-button-group__item:hover, .ncua-button-group--xs .ncua-button-group__item:focus) {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--sm .ncua-button-group__item:where(.is-only-icon) {
+.ncua-button-group--xs .ncua-button-group__item:where(.is-only-icon) {
   padding: 6px;
 }
-:where(.ncua-button-group--sm.has-border) {
+:where(.ncua-button-group--xs.has-border) {
   border-radius: 6px;
 }
 
-.ncua-button-group--md .ncua-button-group__item {
+.ncua-button-group--sm .ncua-button-group__item {
   padding: 6px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-:where(.ncua-button-group--md .ncua-button-group__item.is-current, .ncua-button-group--md .ncua-button-group__item:hover, .ncua-button-group--md .ncua-button-group__item:focus) {
+:where(.ncua-button-group--sm .ncua-button-group__item.is-current, .ncua-button-group--sm .ncua-button-group__item:hover, .ncua-button-group--sm .ncua-button-group__item:focus) {
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
+.ncua-button-group--sm .ncua-button-group__item:where(.is-only-icon) {
   padding: 10px;
 }
-:where(.ncua-button-group--md.has-border) {
+:where(.ncua-button-group--sm.has-border) {
   border-radius: 6px;
 }
 
-.ncua-button-group--lg .ncua-button-group__item {
+.ncua-button-group--md .ncua-button-group__item {
   padding: 8px 16px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
   font-weight: var(--font-weights-commerce-sans-2);
 }
-:where(.ncua-button-group--lg .ncua-button-group__item.is-current, .ncua-button-group--lg .ncua-button-group__item:hover, .ncua-button-group--lg .ncua-button-group__item:focus) {
-  font-weight: var(--font-weights-commerce-sans-2);
+:where(.ncua-button-group--md .ncua-button-group__item.is-current, .ncua-button-group--md .ncua-button-group__item:hover, .ncua-button-group--md .ncua-button-group__item:focus) {
+  font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-button-group--lg .ncua-button-group__item:where(.is-only-icon) {
+.ncua-button-group--md .ncua-button-group__item:where(.is-only-icon) {
   padding: 10px;
 }
-:where(.ncua-button-group--lg.has-border) {
+:where(.ncua-button-group--md.has-border) {
   border-radius: 8px;
 }
 
@@ -755,8 +766,8 @@ button {
   background-color: var(--gray-50);
   border-radius: 4px;
 }
-.ncua-checkbox-field--md .ncua-checkbox-field__text,
-.ncua-checkbox-field--md .ncua-checkbox-field__support-text {
+.ncua-checkbox-field--sm .ncua-checkbox-field__text,
+.ncua-checkbox-field--sm .ncua-checkbox-field__support-text {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
@@ -767,7 +778,7 @@ button {
 .ncua-checkbox-field.has-text .ncua-checkbox-field__input {
   transform: translateY(1px);
 }
-.ncua-checkbox-field.has-text.ncua-checkbox-field--md .ncua-checkbox-field__input {
+.ncua-checkbox-field.has-text.ncua-checkbox-field--sm .ncua-checkbox-field__input {
   transform: translateY(3px);
 }
 
@@ -1182,6 +1193,8 @@ button {
   flex-direction: column;
   line-height: normal;
   vertical-align: top;
+  gap: 4px;
+  font-size: var(--font-size-xxs);
 }
 .ncua-input > *:last-child {
   margin-bottom: 0;
@@ -1208,11 +1221,12 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
+  padding: 4px 10px;
 }
 .ncua-input__field--xs {
   padding: 4px 10px;
 }
-.ncua-input__field--md {
+.ncua-input__field--sm {
   padding: 6px 12px;
 }
 .ncua-input__field {
@@ -1234,8 +1248,8 @@ button {
   padding: 0;
   border: 0;
   color: var(--gray-700);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-heights-sm);
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
   background-color: var(--base-white);
 }
 .ncua-input input::-webkit-input-placeholder,
@@ -1272,17 +1286,17 @@ button {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-input--md {
+.ncua-input--sm {
   gap: 6px;
 }
-.ncua-input--md input {
+.ncua-input--sm input {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
 .ncua-input--xs {
   font-size: var(--font-size-xxs);
 }
-.ncua-input--md {
+.ncua-input--sm {
   font-size: var(--font-size-xs);
 }
 .ncua-input input:-webkit-autofill, .ncua-input input:-webkit-autofill:hover, .ncua-input input:-webkit-autofill:focus, .ncua-input input:-webkit-autofill:active {
@@ -1362,11 +1376,12 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
+  padding: 4px 10px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text--xs {
   padding: 4px 10px;
 }
-.ncua-input__leading-text-wrap .ncua-input__leading-text--md {
+.ncua-input__leading-text-wrap .ncua-input__leading-text--sm {
   padding: 6px 12px;
 }
 .ncua-input__leading-text-wrap .ncua-input__leading-text {
@@ -1386,11 +1401,16 @@ button {
   align-items: center;
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
+  padding: 4px 10px;
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+  font-weight: var(--font-weights-commerce-sans-1);
 }
 .ncua-input__trailing-button .ncua-input__button--xs {
   padding: 4px 10px;
 }
-.ncua-input__trailing-button .ncua-input__button--md {
+.ncua-input__trailing-button .ncua-input__button--sm {
   padding: 6px 12px;
 }
 .ncua-input__trailing-button .ncua-input__button {
@@ -1408,7 +1428,7 @@ button {
   line-height: var(--line-heights-xs);
   font-weight: var(--font-weights-commerce-sans-1);
 }
-.ncua-input__trailing-button .ncua-input__button--md {
+.ncua-input__trailing-button .ncua-input__button--sm {
   padding: 7px 14px;
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
@@ -1423,19 +1443,24 @@ button {
 .ncua-input--textarea {
   gap: 4px;
   width: 100%;
+  font-size: var(--font-size-xxs);
 }
-.ncua-input--textarea--sm textarea {
+.ncua-input--textarea textarea {
+  font-size: var(--font-size-xs);
+  line-height: var(--line-heights-xs);
+}
+.ncua-input--textarea--xs textarea {
   font-size: var(--font-size-xs);
   line-height: var(--line-heights-xs);
 }
-.ncua-input--textarea--md textarea {
+.ncua-input--textarea--sm textarea {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
-.ncua-input--textarea--sm {
+.ncua-input--textarea--xs {
   font-size: var(--font-size-xxs);
 }
-.ncua-input--textarea--md {
+.ncua-input--textarea--sm {
   font-size: var(--font-size-xs);
 }
 .ncua-input--textarea .ncua-input__content {
@@ -2065,7 +2090,7 @@ button {
 .ncua-radio-field__support-text {
   color: var(--gray-400);
 }
-.ncua-radio-field--md .ncua-radio-field__text, .ncua-radio-field--md .ncua-radio-field__support-text {
+.ncua-radio-field--sm .ncua-radio-field__text, .ncua-radio-field--sm .ncua-radio-field__support-text {
   font-size: var(--font-size-sm);
   line-height: var(--line-heights-sm);
 }
@@ -2076,7 +2101,7 @@ button {
 .ncua-radio-field.has-text .ncua-radio-field__input {
   transform: translateY(1px);
 }
-.ncua-radio-field.has-text.ncua-radio-field--md .ncua-radio-field__input {
+.ncua-radio-field.has-text.ncua-radio-field--sm .ncua-radio-field__input {
   transform: translateY(3px);
 }
 
@@ -2759,6 +2784,8 @@ button {
 .ncua-date-picker {
   position: relative;
   display: inline-flex;
+  width: 138px;
+  height: 28px;
 }
 .ncua-date-picker .flatpickr-wrapper {
   border: 1px solid var(--gray-200);
@@ -2767,6 +2794,9 @@ button {
   background: var(--base-white);
   box-shadow: var(--shadow-xs);
   color: var(--gray-700);
+  height: 100%;
+  padding: 5px 10px;
+  font-size: var(--font-size-xs);
 }
 .ncua-date-picker .flatpickr-wrapper:focus-within {
   border-color: var(--gray-400);
@@ -2809,6 +2839,7 @@ button {
   border-radius: 8px;
   left: 0;
   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);
+  width: 248px;
 }
 .ncua-date-picker .flatpickr-calendar::before, .ncua-date-picker .flatpickr-calendar::after {
   content: none;
@@ -2824,6 +2855,7 @@ button {
   justify-content: space-between;
   margin-inline: auto;
   margin-block-end: 12px;
+  width: 224px;
 }
 .ncua-date-picker .flatpickr-months .flatpickr-prev-month,
 .ncua-date-picker .flatpickr-months .flatpickr-next-month {
@@ -2856,6 +2888,10 @@ button {
   padding-block-start: 6px;
   gap: 4px;
 }
+.ncua-date-picker .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker .flatpickr-current-month .cur-year {
+  font-size: var(--font-size-lg);
+}
 .ncua-date-picker .flatpickr-monthDropdown-months {
   margin: 0;
   padding: 0;
@@ -2871,13 +2907,25 @@ button {
 }
 .ncua-date-picker .flatpickr-weekdays {
   margin-inline: auto;
+  width: 224px;
 }
 .ncua-date-picker .dayContainer {
   row-gap: 4px;
+  max-width: 224px;
+  min-width: 224px;
+  column-gap: 0;
+  font-size: 13px;
 }
 .ncua-date-picker .flatpickr-days {
   justify-content: center;
   padding-block-end: 12px;
+  width: 224px;
+}
+.ncua-date-picker .flatpickr-day {
+  max-width: 32px;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
 }
 .ncua-date-picker .flatpickr-day:hover {
   background-color: var(--gray-50);
@@ -2894,70 +2942,68 @@ button {
 .ncua-date-picker .flatpickr-day.today {
   border-color: var(--gray-600);
 }
-.ncua-date-picker--sm {
+.ncua-date-picker--xs {
   width: 138px;
   height: 28px;
 }
-.ncua-date-picker--sm .flatpickr-wrapper {
-  height: 100%;
+.ncua-date-picker--xs .flatpickr-wrapper {
   padding: 5px 10px;
   font-size: var(--font-size-xs);
 }
-.ncua-date-picker--md {
+.ncua-date-picker--sm {
   width: 156px;
   height: 36px;
 }
-.ncua-date-picker--md .flatpickr-wrapper {
-  height: 100%;
+.ncua-date-picker--sm .flatpickr-wrapper {
   padding: 7px 12px;
   font-size: var(--font-size-sm);
 }
-.ncua-date-picker--sm .flatpickr-calendar {
+.ncua-date-picker--xs .flatpickr-calendar {
   width: 248px;
 }
-.ncua-date-picker--sm .flatpickr-months,
-.ncua-date-picker--sm .flatpickr-weekdays,
-.ncua-date-picker--sm .flatpickr-days {
+.ncua-date-picker--xs .flatpickr-months,
+.ncua-date-picker--xs .flatpickr-weekdays,
+.ncua-date-picker--xs .flatpickr-days {
   width: 224px;
 }
-.ncua-date-picker--sm .dayContainer {
+.ncua-date-picker--xs .dayContainer {
   max-width: 224px;
   min-width: 224px;
   column-gap: 0;
   font-size: 13px;
 }
-.ncua-date-picker--sm .flatpickr-day {
+.ncua-date-picker--xs .flatpickr-day {
   max-width: 32px;
   width: 32px;
   height: 32px;
   line-height: 32px;
 }
-.ncua-date-picker--sm .flatpickr-current-month .flatpickr-monthDropdown-months,
-.ncua-date-picker--sm .flatpickr-current-month .cur-year {
-  font-size: var(--font-size-sm);
+.ncua-date-picker--xs .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker--xs .flatpickr-current-month .cur-year {
+  font-size: var(--font-size-xs);
 }
-.ncua-date-picker--md .flatpickr-calendar {
+.ncua-date-picker--sm .flatpickr-calendar {
   width: 343px;
 }
-.ncua-date-picker--md .flatpickr-months,
-.ncua-date-picker--md .flatpickr-weekdays,
-.ncua-date-picker--md .flatpickr-days {
+.ncua-date-picker--sm .flatpickr-months,
+.ncua-date-picker--sm .flatpickr-weekdays,
+.ncua-date-picker--sm .flatpickr-days {
   width: 311px;
 }
-.ncua-date-picker--md .dayContainer {
+.ncua-date-picker--sm .dayContainer {
   max-width: 311px;
   min-width: 311px;
   column-gap: 9.83px;
   font-size: 14px;
 }
-.ncua-date-picker--md .flatpickr-day {
+.ncua-date-picker--sm .flatpickr-day {
   max-width: 36px;
   width: 36px;
   height: 36px;
   line-height: 36px;
 }
-.ncua-date-picker--md .flatpickr-current-month .flatpickr-monthDropdown-months,
-.ncua-date-picker--md .flatpickr-current-month .cur-year {
+.ncua-date-picker--sm .flatpickr-current-month .flatpickr-monthDropdown-months,
+.ncua-date-picker--sm .flatpickr-current-month .cur-year {
   font-size: var(--font-size-lg);
 }
 .ncua-date-picker--disabled .flatpickr-wrapper,
@@ -3348,21 +3394,24 @@ button {
   border-radius: 6px;
   cursor: pointer;
   background-color: transparent;
+  padding: 5px 12px;
+  height: 34px;
+  font-size: var(--font-size-xs);
 }
 .ncua-tab-button:hover, .ncua-tab-button.is-active {
   color: var(--gray-700);
 }
-.ncua-tab-button--xs {
+.ncua-tab-button--sm {
   padding: 5px 12px;
   height: 34px;
   font-size: var(--font-size-xs);
 }
-.ncua-tab-button--sm {
+.ncua-tab-button--md {
   padding: 7px 12px;
   height: 38px;
   font-size: var(--font-size-sm);
 }
-.ncua-tab-button--md {
+.ncua-tab-button--lg {
   padding: 9px 14px;
   height: 44px;
   font-size: var(--font-size-md);
@@ -3373,15 +3422,19 @@ button {
 .ncua-tab-button--button-primary:focus {
   box-shadow: var(--focus-ring-4px-gray-100);
 }
-.ncua-tab-button--button-white.ncua-tab-button--xs {
+.ncua-tab-button--button-white {
   padding: 5px 12px;
   height: 28px;
 }
 .ncua-tab-button--button-white.ncua-tab-button--sm {
+  padding: 5px 12px;
+  height: 28px;
+}
+.ncua-tab-button--button-white.ncua-tab-button--md {
   padding: 7px 12px;
   height: 32px;
 }
-.ncua-tab-button--button-white.ncua-tab-button--md {
+.ncua-tab-button--button-white.ncua-tab-button--lg {
   padding: 9px 14px;
   height: 40px;
 }

package/package.json

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