@ncds/ui-admin 0.0.22 → 0.0.23

package/dist/esm/src/components/featured-icon/FeaturedIcon.js

@@ -0,0 +1,72 @@
+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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+var iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+var iconStrokeColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+export var FeaturedIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var name = _a.name,
+    _b = _a.theme,
+    theme = _b === void 0 ? 'light-circle' : _b,
+    _c = _a.color,
+    color = _c === void 0 ? 'neutral' : _c,
+    _d = _a.size,
+    size = _d === void 0 ? 'md' : _d,
+    className = _a.className,
+    rest = __rest(_a, ["name", "theme", "color", "size", "className"]);
+  var getIconColor = function () {
+    if (theme === 'dark-circle') {
+      return 'white';
+    }
+    if (theme === 'square-outline') {
+      return 'gray700';
+    }
+    return iconStrokeColorMap[color];
+  };
+  return _jsxs("div", __assign({
+    ref: ref,
+    className: classNames('ncua-featured-icon', "ncua-featured-icon--".concat(theme), "ncua-featured-icon--".concat(color), "ncua-featured-icon--".concat(size), className)
+  }, rest, {
+    children: [theme === 'outline-circle' && _jsxs(_Fragment, {
+      children: [_jsx("div", {
+        className: "ncua-featured-icon__outline ncua-featured-icon__outline--inner"
+      }), _jsx("div", {
+        className: "ncua-featured-icon__outline ncua-featured-icon__outline--outer"
+      })]
+    }), _jsx(Icon, {
+      name: name,
+      width: iconSizeMap[size],
+      height: iconSizeMap[size],
+      color: COLOR[getIconColor()]
+    })]
+  }));
+});

package/dist/esm/src/components/featured-icon/index.js

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

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

@@ -4,13 +4,20 @@ export * from './button';
 export * from './carousel';
 export * from './checkbox';
 export * from './date-picker';
-export * from './dropdown';
+export * from './featured-icon';
+export * from './divider';
+export * from './empty-state';
 export * from './input';
+export * from './modal';
+export * from './notification';
 export * from './pagination';
+export * from './progress-bar';
+export * from './progress-circle';
 export * from './radio';
 export * from './select';
 export * from './shared';
 export * from './spinner';
+export * from './tab';
 export * from './tag';
 export * from './toggle';
 export * from './tooltip';

package/dist/esm/src/components/modal/Modal.js

@@ -0,0 +1,185 @@
+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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { useEffect, useRef } from 'react';
+import ReactDOM from 'react-dom';
+import { FeaturedIcon } from '../featured-icon';
+import Icon from '@ncds/ui-admin-icon';
+export var Modal = function (_a) {
+  var isOpen = _a.isOpen,
+    onClose = _a.onClose,
+    children = _a.children,
+    _b = _a.size,
+    size = _b === void 0 ? 'md' : _b,
+    _c = _a.closeOnBackdropClick,
+    closeOnBackdropClick = _c === void 0 ? true : _c,
+    _d = _a.closeOnEsc,
+    closeOnEsc = _d === void 0 ? true : _d,
+    className = _a.className,
+    restProps = __rest(_a, ["isOpen", "onClose", "children", "size", "closeOnBackdropClick", "closeOnEsc", "className"]);
+  var modalRef = useRef(null);
+  var handleBackdropClick = function (e) {
+    if (closeOnBackdropClick && e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  useEffect(function () {
+    var handleKeyDown = function (e) {
+      if (isOpen && closeOnEsc && e.key === 'Escape') {
+        onClose();
+      }
+    };
+    if (isOpen) {
+      document.addEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = 'hidden';
+    }
+    return function () {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.body.style.overflow = '';
+    };
+  }, [isOpen, closeOnEsc, onClose]);
+  if (!isOpen) return null;
+  var modalContent = _jsx("div", __assign({
+    className: classnames('ncua-modal-backdrop', className),
+    onClick: handleBackdropClick,
+    ref: modalRef
+  }, restProps, {
+    children: _jsx("div", __assign({
+      className: classnames('ncua-modal', "ncua-modal--".concat(size))
+    }, {
+      children: children
+    }))
+  }));
+  return /*#__PURE__*/ReactDOM.createPortal(modalContent, document.body);
+};
+Modal.Header = function (_a) {
+  var children = _a.children,
+    onClose = _a.onClose,
+    featuredIcon = _a.featuredIcon,
+    title = _a.title,
+    subtitle = _a.subtitle,
+    _b = _a.align,
+    align = _b === void 0 ? 'left' : _b,
+    _c = _a.showDivider,
+    showDivider = _c === void 0 ? false : _c,
+    _d = _a.hideCloseButton,
+    hideCloseButton = _d === void 0 ? false : _d;
+  return _jsxs(_Fragment, {
+    children: [_jsxs("header", __assign({
+      className: classnames('ncua-modal__header', "ncua-modal__header--".concat(align))
+    }, {
+      children: [featuredIcon && _jsx(FeaturedIcon, {
+        name: featuredIcon.name,
+        color: featuredIcon.color,
+        theme: featuredIcon.theme
+      }), _jsxs("div", __assign({
+        className: "ncua-modal__title"
+      }, {
+        children: [_jsx("div", __assign({
+          className: "ncua-modal__title-text"
+        }, {
+          children: title
+        })), subtitle && _jsx("div", __assign({
+          className: "ncua-modal__title-subtitle"
+        }, {
+          children: subtitle
+        }))]
+      })), children, !hideCloseButton && _jsx("button", __assign({
+        className: "ncua-modal__close-button",
+        onClick: onClose
+      }, {
+        children: _jsx(Icon, {
+          name: "x"
+        })
+      }))]
+    })), showDivider && _jsx("div", {
+      className: "ncua-modal__header-divider"
+    })]
+  });
+};
+Modal.Content = function (_a) {
+  var children = _a.children;
+  return _jsx("div", __assign({
+    className: "ncua-modal__content"
+  }, {
+    children: children
+  }));
+};
+/**
+ * Modal.Actions - The actions area of the modal
+ *
+ * Examples:
+ *
+ * 1. Vertical layout (buttons stacked):
+ * <Modal.Actions layout="vertical" align="stretch">
+ *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 2. Horizontal layout (buttons side by side):
+ * <Modal.Actions layout="horizontal" align="stretch">
+ *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ * </Modal.Actions>
+ *
+ * 3. Checkbox layout (checkbox on left, buttons on right):
+ * <Modal.Actions layout="checkbox" align="stretch" checkboxContent={
+ *   <>
+ *     <Checkbox text="Never show again" />
+ *     <a href="#">Settings</a>
+ *   </>
+ * }>
+ *   <Button label="Cancel" onClick={handleCancel} hierarchy="secondary-gray" />
+ *   <Button label="Confirm" onClick={handleConfirm} hierarchy="primary" />
+ * </Modal.Actions>
+ */
+Modal.Actions = function (_a) {
+  var children = _a.children,
+    _b = _a.layout,
+    layout = _b === void 0 ? 'vertical' : _b,
+    _c = _a.showDivider,
+    showDivider = _c === void 0 ? false : _c,
+    _d = _a.align,
+    align = _d === void 0 ? 'stretch' : _d,
+    checkboxContent = _a.checkboxContent;
+  return _jsxs(_Fragment, {
+    children: [showDivider && _jsx("div", {
+      className: "ncua-modal__actions-divider"
+    }), _jsxs("div", __assign({
+      className: classnames('ncua-modal__actions-wrapper', {
+        'ncua-modal__actions-wrapper--checkbox': layout === 'checkbox'
+      })
+    }, {
+      children: [layout === 'checkbox' && _jsx("div", __assign({
+        className: "ncua-modal__actions-checkbox"
+      }, {
+        children: _jsx("div", __assign({
+          className: "ncua-modal__actions-checkbox-content"
+        }, {
+          children: checkboxContent
+        }))
+      })), _jsx("div", __assign({
+        className: classnames('ncua-modal__actions', "ncua-modal__actions--".concat(layout), "ncua-modal__actions--".concat(align))
+      }, {
+        children: children
+      }))]
+    }))]
+  });
+};

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

@@ -0,0 +1 @@
+export { Modal } from './Modal';

package/dist/esm/src/components/notification/FloatingNotification.js

@@ -0,0 +1,97 @@
+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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FeaturedIcon } from '../featured-icon/FeaturedIcon';
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+var iconNameMap = {
+  neutral: 'pin-02',
+  error: 'alert-triangle',
+  warning: 'alert-circle',
+  success: 'check-circle'
+};
+export var FloatingNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+    supportingText = _a.supportingText,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'neutral' : _b,
+    onClose = _a.onClose,
+    className = _a.className,
+    actions = _a.actions,
+    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
+  var iconColor = variant;
+  var featuredIconProps = {
+    name: iconNameMap[variant],
+    size: 'sm',
+    color: iconColor,
+    theme: 'dark-circle'
+  };
+  return _jsxs("div", __assign({
+    ref: ref,
+    className: classNames('ncua-floating-notification', "ncua-floating-notification--".concat(variant), className),
+    role: "alert"
+  }, rest, {
+    children: [_jsx("div", __assign({
+      className: "ncua-floating-notification__content"
+    }, {
+      children: _jsxs("div", __assign({
+        className: "ncua-floating-notification__container"
+      }, {
+        children: [iconNameMap[variant] && _jsxs(_Fragment, {
+          children: [_jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+            className: "ncua-floating-notification__pc-icon"
+          })), _jsx(FeaturedIcon, __assign({}, featuredIconProps, {
+            size: "md",
+            className: "ncua-floating-notification__mobile-icon"
+          }))]
+        }), _jsxs("div", __assign({
+          className: "ncua-floating-notification__text-container"
+        }, {
+          children: [_jsx("div", __assign({
+            className: "ncua-floating-notification__title-wrapper"
+          }, {
+            children: _jsx("span", __assign({
+              className: "ncua-floating-notification__title"
+            }, {
+              children: title
+            }))
+          })), supportingText && _jsx("span", __assign({
+            className: "ncua-floating-notification__supporting-text"
+          }, {
+            children: supportingText
+          })), actions && _jsx("div", __assign({
+            className: "ncua-floating-notification__actions"
+          }, {
+            children: actions
+          }))]
+        }))]
+      }))
+    })), onClose && _jsx("button", __assign({
+      type: "button",
+      className: "ncua-floating-notification__close-button",
+      onClick: onClose,
+      "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+    }, {
+      children: _jsx(Icon, {
+        name: "x"
+      })
+    }))]
+  }));
+});

package/dist/esm/src/components/notification/FullWidthNotification.js

@@ -0,0 +1,105 @@
+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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef } from 'react';
+import { COLOR } from '../../../constant/color';
+var iconNameMap = {
+  neutral: 'message-chat-square',
+  error: 'alert-triangle',
+  warning: 'alert-triangle',
+  success: 'check-circle'
+};
+var iconColorMap = {
+  neutral: 'gray700',
+  error: 'red500',
+  warning: 'orange500',
+  success: 'green600'
+};
+export var FullWidthNotification = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var title = _a.title,
+    supportingText = _a.supportingText,
+    _b = _a.variant,
+    variant = _b === void 0 ? 'neutral' : _b,
+    onClose = _a.onClose,
+    className = _a.className,
+    actions = _a.actions,
+    rest = __rest(_a, ["title", "supportingText", "variant", "onClose", "className", "actions"]);
+  var closeIconSize = {
+    width: 20,
+    height: 20
+  };
+  return _jsx("div", __assign({
+    ref: ref,
+    className: classNames('ncua-full-width-notification', "ncua-full-width-notification--".concat(variant), className),
+    role: "alert"
+  }, rest, {
+    children: _jsx("div", __assign({
+      className: "ncua-full-width-notification__container"
+    }, {
+      children: _jsxs("div", __assign({
+        className: "ncua-full-width-notification__content"
+      }, {
+        children: [_jsxs("div", __assign({
+          className: "ncua-full-width-notification__content-wrapper"
+        }, {
+          children: [_jsx(Icon, {
+            name: iconNameMap[variant],
+            width: 16,
+            height: 16,
+            color: COLOR[iconColorMap[variant]],
+            className: "ncua-full-width-notification__icon"
+          }), _jsxs("div", __assign({
+            className: "ncua-full-width-notification__text-container"
+          }, {
+            children: [_jsx("span", __assign({
+              className: "ncua-full-width-notification__title"
+            }, {
+              children: title
+            })), supportingText && _jsx("span", __assign({
+              className: "ncua-full-width-notification__supporting-text"
+            }, {
+              children: supportingText
+            }))]
+          }))]
+        })), _jsxs("div", __assign({
+          className: "ncua-full-width-notification__actions-container"
+        }, {
+          children: [actions && _jsx("div", __assign({
+            className: "ncua-full-width-notification__actions"
+          }, {
+            children: actions
+          })), onClose && _jsx("button", __assign({
+            type: "button",
+            className: "ncua-full-width-notification__close-button",
+            onClick: onClose,
+            "aria-label": "\uC54C\uB9BC \uB2EB\uAE30"
+          }, {
+            children: _jsx(Icon, __assign({
+              name: "x-close"
+            }, closeIconSize, {
+              color: COLOR[iconColorMap[variant]]
+            }))
+          }))]
+        }))]
+      }))
+    }))
+  }));
+});

package/dist/esm/src/components/notification/Notification.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);
+};
+var __rest = this && this.__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import classNames from 'classnames';
+import { FloatingNotification } from './FloatingNotification';
+import { FullWidthNotification } from './FullWidthNotification';
+export var Notification = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b = _a.type,
+    type = _b === void 0 ? 'floating' : _b,
+    title = _a.title,
+    supportingText = _a.supportingText,
+    _c = _a.variant,
+    variant = _c === void 0 ? 'neutral' : _c,
+    onClose = _a.onClose,
+    className = _a.className,
+    actions = _a.actions,
+    rest = __rest(_a, ["type", "title", "supportingText", "variant", "onClose", "className", "actions"]);
+  var actionsContent = actions && actions.length > 0 ? _jsx(_Fragment, {
+    children: actions.map(function (action, index) {
+      return _jsx("button", __assign({
+        onClick: action.onClick,
+        className: classNames('ncua-notification__action-button', "ncua-notification__action-button--".concat(action.hierarchy || 'link-gray'))
+      }, {
+        children: action.label
+      }), index);
+    })
+  }) : null;
+  var sharedProps = __assign({
+    title: title,
+    supportingText: supportingText,
+    variant: variant,
+    onClose: onClose,
+    className: className,
+    actions: actionsContent
+  }, rest);
+  return type === 'floating' ? _jsx(FloatingNotification, __assign({}, sharedProps, {
+    ref: ref
+  })) : _jsx(FullWidthNotification, __assign({}, sharedProps, {
+    ref: ref
+  }));
+});
+Notification.displayName = 'Notification';

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

@@ -0,0 +1,3 @@
+export * from './Notification';
+export * from './FloatingNotification';
+export * from './FullWidthNotification';

package/dist/esm/src/components/pagination/NavButton.js

@@ -43,7 +43,7 @@ var NAV_BUTTON_CONFIG = {
 export var NavButton = function (_a) {
   var type = _a.type,
     as = _a.as,
-    isPC = _a.isPC,
+    breakPoint = _a.breakPoint,
     noPrev = _a.noPrev,
     noNext = _a.noNext,
     href = _a.href,
@@ -54,6 +54,7 @@ export var NavButton = function (_a) {
   var isFirstOrPrev = type === 'first' || type === 'prev';
   var isNextOrLast = type === 'next' || type === 'last';
   var disabled = isFirstOrPrev ? noPrev : isNextOrLast ? noNext : false;
+  var isPC = breakPoint === 'pc';
   // key를 제외한 공통 props
   var buttonProps = {
     label: config.label,
@@ -62,15 +63,16 @@ export var NavButton = function (_a) {
     leadingIcon: {
       type: 'icon',
       icon: config.getIcon(isPC),
-      color: disabled ? 'gray200' : 'gray700'
+      color: disabled ? 'gray200' : 'gray700',
+      size: isPC ? 16 : 20
     },
     hierarchy: 'secondary-gray',
-    size: 'xs',
+    size: isPC ? 'xs' : 'sm',
     disabled: disabled,
     onClick: onClick
   };
   // key 값 별도 계산
-  var buttonKey = isNavigationButton ? "".concat(isPC ? 'pc' : 'mobile', "-").concat(type) : undefined;
+  var buttonKey = isNavigationButton ? "".concat(breakPoint, "-").concat(type) : undefined;
   if (as === 'a') {
     return _jsx(Button, __assign({
       as: "a",

package/dist/esm/src/components/pagination/Pagination.js

@@ -20,7 +20,6 @@ import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-run
 import classNames from 'classnames';
 import { isFunction, range, uniqueId } from 'lodash-es';
 import { useEffect, useState } from 'react';
-import { MINIMUM_PC_SIZE } from '../../constant';
 import { NavButton } from './NavButton';
 // 네비게이션 버튼 설정
 export var Pagination = function (_a) {
@@ -42,9 +41,6 @@ export var Pagination = function (_a) {
   var _g = useState(1),
     start = _g[0],
     setStart = _g[1];
-  var _h = useState(globalThis.innerWidth > MINIMUM_PC_SIZE),
-    isPC = _h[0],
-    setIsPC = _h[1];
   var noPrev = start === 1;
   var noNext = start + pageCount - 1 >= totalPage;
   var showJumpPageButton = totalPage > pageCount;
@@ -72,17 +68,6 @@ export var Pagination = function (_a) {
       setStart(lastGroupStart);
     }
   }, [currentPage]);
-  useEffect(function () {
-    var mql = globalThis.matchMedia("(min-width: ".concat(MINIMUM_PC_SIZE, "px)"));
-    setIsPC(mql.matches);
-    var handleResize = function (e) {
-      setIsPC(e.matches);
-    };
-    mql.addEventListener('change', handleResize);
-    return function () {
-      return mql.removeEventListener('change', handleResize);
-    };
-  }, []);
   return _jsx(_Fragment, {
     children: _jsxs("div", __assign({
       className: classNames('ncua-pagination', "ncua-pagination--".concat(breakPoint), className)
@@ -91,7 +76,7 @@ export var Pagination = function (_a) {
         children: [NavButton({
           type: 'first',
           as: as,
-          isPC: isPC,
+          breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
           href: restProps.href || '',
@@ -102,7 +87,7 @@ export var Pagination = function (_a) {
         }), NavButton({
           type: 'prev',
           as: as,
-          isPC: isPC,
+          breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
           href: restProps.href || '',
@@ -142,7 +127,7 @@ export var Pagination = function (_a) {
         children: [NavButton({
           type: 'next',
           as: as,
-          isPC: isPC,
+          breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
           href: restProps.href || '',
@@ -153,7 +138,7 @@ export var Pagination = function (_a) {
         }), NavButton({
           type: 'last',
           as: as,
-          isPC: isPC,
+          breakPoint: breakPoint,
           noPrev: noPrev,
           noNext: noNext,
           href: restProps.href || '',