@canonical/react-components 1.3.1 → 1.3.2

package/dist-esm/components/Notification/Notification.js

@@ -1,119 +0,0 @@
-var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "titleElement", "type"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-import classNames from "classnames";
-import React, { useEffect, useRef } from "react";
-import Button, { ButtonAppearance } from "../Button";
-import { IS_DEV } from "../../utils";
-export var Label = /*#__PURE__*/function (Label) {
-  Label["Close"] = "Close notification";
-  return Label;
-}({});
-export var NotificationSeverity = {
-  CAUTION: "caution",
-  INFORMATION: "information",
-  NEGATIVE: "negative",
-  POSITIVE: "positive"
-};
-export var DefaultTitles = {
-  [NotificationSeverity.CAUTION]: "Warning",
-  [NotificationSeverity.INFORMATION]: "Info",
-  [NotificationSeverity.NEGATIVE]: "Error",
-  [NotificationSeverity.POSITIVE]: "Success"
-};
-
-/**
- * The props for the Notification component.
- */
-
-/**
-This is a [React](https://reactjs.org/) component for the Vanilla [Notification](https://docs.vanillaframework.io/patterns/notification/).
-
-Notifications are used to display global information, our notification variants consist of default, caution, negative or positive.
-
-The `NotificationProvider` component can be used to manage the notification state globally. Wrap your application components with it and then in any child component you can get the helper with `const notify = useNotify()` to easily trigger notifications:
-
-* `notify.info("You should keep this in mind")`
-* `notify.failure("Error when fooing a bar", errorObjectFromCatch)`
-* `notify.success("The bar was foo'd", "Success")`
-
-The `NotificationConsumer` component can be used to display notifications. It will automatically display any notifications that are added to the `NotificationProvider` state.
-
-The Notification API has changed since v0.18 in order to support new variants
-and align with our component prop naming conventions.
-
-| Deprecated prop names | Replaced by |
-| --------------------- | ----------- |
-| `type`                | `severity`  |
-| `status`              | `title`     |
-| `close`               | `onDismiss` |
-
-The `notificationTypes` const has also been replaced with `NotificationSeverity`
-to reflect the new prop name.
- */
-var Notification = _ref => {
-  var {
-      actions,
-      borderless = false,
-      children,
-      className,
-      close,
-      inline = false,
-      onDismiss,
-      severity = NotificationSeverity.INFORMATION,
-      status,
-      timeout,
-      timestamp,
-      title,
-      titleElement: TitleComponent = "h5",
-      type
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var timeoutId = useRef(null);
-  var hasActions = (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-  var showMeta = !!timestamp || hasActions;
-  useEffect(() => {
-    if (timeout && onDismiss) {
-      timeoutId.current = setTimeout(() => onDismiss(), timeout);
-    }
-    return () => clearTimeout(timeoutId.current);
-  }, [onDismiss, timeout]);
-  if (IS_DEV && (close || status || type)) {
-    console.warn("The Notification component is using deprecated props. Refer to the deprecated list for details: https://canonical.github.io/react-components/?path=/docs/notification--information#deprecated");
-  }
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: classNames(className, {
-      ["p-notification--".concat(severity)]: !!severity,
-      "p-notification": !severity,
-      "is-borderless": borderless,
-      "is-inline": inline
-    })
-  }, props), /*#__PURE__*/React.createElement("div", {
-    className: "p-notification__content"
-  }, title && /*#__PURE__*/React.createElement(TitleComponent, {
-    className: "p-notification__title",
-    "data-testid": "notification-title"
-  }, title), inline && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002"), /*#__PURE__*/React.createElement("p", {
-    className: "p-notification__message"
-  }, children), onDismiss && /*#__PURE__*/React.createElement("button", {
-    className: "p-notification__close",
-    "data-testid": "notification-close-button",
-    onClick: onDismiss
-  }, Label.Close)), showMeta && /*#__PURE__*/React.createElement("div", {
-    className: "p-notification__meta",
-    "data-testid": "notification-meta"
-  }, timestamp && /*#__PURE__*/React.createElement("span", {
-    className: "p-notification__timestamp",
-    "data-testid": "notification-timestamp"
-  }, timestamp), hasActions ? /*#__PURE__*/React.createElement("div", {
-    className: "p-notification__actions"
-  }, actions.map((action, i) => /*#__PURE__*/React.createElement(Button, {
-    appearance: ButtonAppearance.LINK,
-    className: "p-notification__action",
-    "data-testid": "notification-action",
-    key: "".concat(action.label, "-").concat(i),
-    onClick: action.onClick
-  }, action.label))) : null));
-};
-export default Notification;

package/dist-esm/components/Notification/index.js

@@ -1 +0,0 @@
-export { default, NotificationSeverity } from "./Notification";

package/dist-esm/components/NotificationProvider/NotificationProvider.js

@@ -1,83 +0,0 @@
-import React, { createContext, useContext, useEffect, useRef, useState } from "react";
-import isEqual from "lodash/isEqual";
-import { info as _info, failure as _failure, success as _success, queue } from "./messageBuilder";
-import Notification, { DefaultTitles } from "../Notification/Notification";
-var NotifyContext = /*#__PURE__*/createContext({
-  notification: null,
-  clear: () => undefined,
-  failure: () => undefined,
-  success: () => undefined,
-  info: () => undefined,
-  queue: () => undefined,
-  setDeduplicated: () => undefined
-});
-export var NotificationProvider = _ref => {
-  var {
-    children,
-    state,
-    pathname
-  } = _ref;
-  var [notification, setNotification] = useState(null);
-  var clear = () => notification !== null && setNotification(null);
-  var setDeduplicated = value => {
-    if (!isEqual(value, notification)) {
-      setNotification(value);
-    }
-    return value;
-  };
-  useEffect(() => {
-    if (state !== null && state !== void 0 && state.queuedNotification) {
-      setDeduplicated(state.queuedNotification);
-      window.history.replaceState({}, "");
-    } else {
-      clear();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state, pathname]);
-  var helper = {
-    notification,
-    clear,
-    queue,
-    failure: (title, error, message, actions) => setDeduplicated(_failure(title, error, message, actions)),
-    info: (message, title) => setDeduplicated(_info(message, title)),
-    success: (message, title) => setDeduplicated(_success(message, title)),
-    setDeduplicated
-  };
-  return /*#__PURE__*/React.createElement(NotifyContext.Provider, {
-    value: helper
-  }, children);
-};
-export function useNotify() {
-  return useContext(NotifyContext);
-}
-export var NotificationConsumer = () => {
-  var notify = useNotify();
-  var ref = useRef(null);
-  useEffect(() => {
-    var _ref$current;
-    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.hasAttribute("scrollIntoView")) {
-      ref.current.scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-        inline: "start"
-      });
-    }
-  }, [notify.notification]);
-  if (!notify.notification) {
-    return null;
-  }
-  var {
-    actions,
-    title,
-    type,
-    message
-  } = notify.notification;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: ref
-  }, /*#__PURE__*/React.createElement(Notification, {
-    title: title !== null && title !== void 0 ? title : DefaultTitles[type],
-    actions: actions,
-    severity: type,
-    onDismiss: notify.clear
-  }, message));
-};

package/dist-esm/components/NotificationProvider/index.js

@@ -1,2 +0,0 @@
-export { NotificationConsumer, NotificationProvider, useNotify } from "./NotificationProvider";
-export { info, success, failure, queue } from "./messageBuilder";

package/dist-esm/components/NotificationProvider/messageBuilder.js

@@ -1,31 +0,0 @@
-import React from "react";
-import { NotificationSeverity } from "../Notification";
-export var queue = notification => {
-  return {
-    state: {
-      queuedNotification: notification
-    }
-  };
-};
-export var info = (message, title) => {
-  return {
-    message,
-    title,
-    type: NotificationSeverity.INFORMATION
-  };
-};
-export var success = (message, title) => {
-  return {
-    message,
-    title,
-    type: NotificationSeverity.POSITIVE
-  };
-};
-export var failure = (title, error, message, actions) => {
-  return {
-    actions,
-    message: error && error instanceof Error ? /*#__PURE__*/React.createElement(React.Fragment, null, message, " ", error.message) : message,
-    title,
-    type: NotificationSeverity.NEGATIVE
-  };
-};

package/dist-esm/components/NotificationProvider/types.js

@@ -1 +0,0 @@
-export {};

package/dist-esm/components/Pagination/Pagination.js

@@ -1,173 +0,0 @@
-var _excluded = ["itemsPerPage", "totalItems", "paginate", "currentPage", "scrollToTop", "truncateThreshold", "centered", "showLabels", "hideNumbers", "onForward", "onBack", "forwardDisabled", "backDisabled", "forwardLabel", "backLabel"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-import classNames from "classnames";
-import React from "react";
-import PaginationButton from "./PaginationButton";
-import PaginationItem from "./PaginationItem";
-var scrollTop = () => window.scrollTo(0, 0);
-var generatePaginationItems = (pageNumbers, currentPage, truncateThreshold, changePage) => {
-  var lastPage = pageNumbers.length;
-  var truncated = lastPage > truncateThreshold;
-  var visiblePages;
-  if (truncated) {
-    // the default range for pages outside the start and end threshold
-    var start = currentPage - 2;
-    var end = currentPage + 1;
-    // on page 1, also show pages 2, 3 and 4
-    if (currentPage === 1) {
-      start = 1;
-      end = Math.min(lastPage - 1, currentPage + 3);
-    }
-    // on page 2, show page 1, and also pages 3, and 4
-    if (currentPage === 2) {
-      start = 1;
-      end = Math.min(lastPage - 1, currentPage + 3);
-    }
-    // on the last page and page before last, also show the 3 previous pages
-    if (currentPage === lastPage || currentPage === lastPage - 1) {
-      start = Math.max(1, lastPage - 4);
-      end = lastPage - 1;
-    }
-    visiblePages = pageNumbers.slice(start, end);
-  } else {
-    visiblePages = pageNumbers;
-  }
-  var items = [];
-  if (truncated) {
-    // render first in sequence
-    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
-      key: 1,
-      number: 1,
-      isActive: currentPage === 1,
-      onClick: () => changePage(1)
-    }));
-    if (!visiblePages.includes(2)) {
-      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
-        key: "sep1"
-      }));
-    }
-  }
-  items.push(visiblePages.map(number => /*#__PURE__*/React.createElement(PaginationItem, {
-    key: number,
-    number: number,
-    isActive: number === currentPage,
-    onClick: () => changePage(number)
-  })));
-  if (truncated) {
-    // render last in sequence
-    if (!visiblePages.includes(lastPage - 1)) {
-      items.push( /*#__PURE__*/React.createElement(PaginationItemSeparator, {
-        key: "sep2"
-      }));
-    }
-    items.push( /*#__PURE__*/React.createElement(PaginationItem, {
-      key: lastPage,
-      number: lastPage,
-      isActive: currentPage === lastPage,
-      onClick: () => changePage(lastPage)
-    }));
-  }
-  return items;
-};
-var PaginationItemSeparator = () => /*#__PURE__*/React.createElement("li", {
-  className: "p-pagination__item p-pagination__item--truncation"
-}, "\u2026");
-
-// Props that are used in both types of paginations.
-
-// Used when number of items per page, number of total items,
-// current page and paginate function is defined. Pagination
-// is handled by paginate function and optional onForward and
-// onBack functions.
-
-// Used when number of items per page, number of total items,
-// current page and paginate function are undefined.
-// Pagination is handled by onForward and onBack function.
-
-/**
-This is a [React](https://reactjs.org/) component for the Vanilla [Pagination](https://docs.vanillaframework.io/patterns/pagination/).
-
-The pagination component should be used to navigate between pages of content. There are two types of pagination being provided:
-
-* **Numbered Pagination:** used when the total number of items is known.<br />
-  Depending on the length provided, the pagination component will automatically scale.<br />
-  **Required props:** itemsPerPage, totalItems, paginate, currentPage.
-
-* **Buttons-only Pagination:** used when the total number of items is unknown.<br />
-  **Required props:** onForward, onBack.
- */
-var Pagination = _ref => {
-  var {
-      itemsPerPage,
-      totalItems,
-      paginate,
-      currentPage,
-      scrollToTop,
-      truncateThreshold = 10,
-      centered,
-      showLabels,
-      hideNumbers,
-      onForward,
-      onBack,
-      forwardDisabled,
-      backDisabled,
-      forwardLabel,
-      backLabel
-    } = _ref,
-    navProps = _objectWithoutProperties(_ref, _excluded);
-  var isNumberedPagination = !!itemsPerPage && !!totalItems && !!currentPage && !!paginate;
-  var pageNumbers = [];
-  if (isNumberedPagination) {
-    // return early if no pagination is required
-    if (totalItems <= itemsPerPage) {
-      return null;
-    }
-    for (var i = 1; i <= Math.ceil(totalItems / itemsPerPage); i++) {
-      pageNumbers.push(i);
-    }
-  }
-  var changeNumberedPage = page => {
-    paginate(page);
-    if (page > currentPage) {
-      onForward === null || onForward === void 0 || onForward(page);
-    }
-    if (page < currentPage) {
-      onBack === null || onBack === void 0 || onBack(page);
-    }
-    scrollToTop && scrollTop();
-  };
-  var changeButtonsOnlyPage = direction => {
-    if (direction === "forward") {
-      onForward === null || onForward === void 0 || onForward(undefined);
-    }
-    if (direction === "back") {
-      onBack === null || onBack === void 0 || onBack(undefined);
-    }
-    scrollToTop && scrollTop();
-  };
-  return /*#__PURE__*/React.createElement("nav", _extends({
-    className: "p-pagination",
-    "aria-label": "Pagination"
-  }, navProps), /*#__PURE__*/React.createElement("ol", {
-    className: classNames("p-pagination__items", {
-      "u-align--center": centered
-    })
-  }, /*#__PURE__*/React.createElement(PaginationButton, {
-    key: "back",
-    direction: "back",
-    disabled: backDisabled || currentPage === 1,
-    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage - 1) : changeButtonsOnlyPage("back"),
-    showLabel: showLabels,
-    label: backLabel
-  }), isNumberedPagination && !hideNumbers ? generatePaginationItems(pageNumbers, currentPage, truncateThreshold, changeNumberedPage) : null, /*#__PURE__*/React.createElement(PaginationButton, {
-    key: "forward",
-    direction: "forward",
-    disabled: forwardDisabled || currentPage === pageNumbers.length,
-    onClick: () => isNumberedPagination ? changeNumberedPage(currentPage + 1) : changeButtonsOnlyPage("forward"),
-    showLabel: showLabels,
-    label: forwardLabel
-  })));
-};
-export default Pagination;

package/dist-esm/components/Pagination/PaginationButton/PaginationButton.js

@@ -1,31 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-export var Label = /*#__PURE__*/function (Label) {
-  Label["Next"] = "Next page";
-  Label["Previous"] = "Previous page";
-  return Label;
-}({});
-var PaginationButton = _ref => {
-  var {
-    direction,
-    onClick,
-    disabled = false,
-    showLabel,
-    label
-  } = _ref;
-  var buttonLabel = label || (direction === "back" ? Label.Previous : Label.Next);
-  return /*#__PURE__*/React.createElement("li", {
-    className: "p-pagination__item"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: classNames({
-      "p-pagination__link--previous": direction === "back",
-      "p-pagination__link--next": direction === "forward"
-    }),
-    disabled: disabled,
-    onClick: onClick,
-    type: "button"
-  }, direction === "forward" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel), /*#__PURE__*/React.createElement("i", {
-    className: "p-icon--chevron-down"
-  }, buttonLabel), direction === "back" && showLabel && /*#__PURE__*/React.createElement("span", null, buttonLabel)));
-};
-export default PaginationButton;

package/dist-esm/components/Pagination/PaginationButton/index.js

@@ -1 +0,0 @@
-export { default } from "./PaginationButton";

package/dist-esm/components/Pagination/PaginationItem/PaginationItem.js

@@ -1,20 +0,0 @@
-import classNames from "classnames";
-import React from "react";
-var PaginationItem = _ref => {
-  var {
-    number,
-    onClick,
-    isActive = false
-  } = _ref;
-  return /*#__PURE__*/React.createElement("li", {
-    className: "p-pagination__item"
-  }, /*#__PURE__*/React.createElement("button", {
-    className: classNames("p-pagination__link", {
-      "is-active": isActive
-    }),
-    onClick: onClick,
-    "aria-current": isActive ? "page" : undefined,
-    type: "button"
-  }, number));
-};
-export default PaginationItem;

package/dist-esm/components/Pagination/PaginationItem/index.js

@@ -1 +0,0 @@
-export { default } from "./PaginationItem";

package/dist-esm/components/Pagination/index.js

@@ -1 +0,0 @@
-export { default } from "./Pagination";

package/dist-esm/components/Panel/Panel.js

@@ -1,89 +0,0 @@
-var _excluded = ["icon", "iconAlt", "name", "nameAlt", "component"],
-  _excluded2 = ["forwardRef", "children", "className", "contentClassName", "controlsClassName", "controls", "dark", "header", "logo", "stickyHeader", "title", "titleClassName", "titleComponent", "titleId", "toggle", "wrapContent"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-import React from "react";
-import classNames from "classnames";
-import { isReactNode } from "../../utils";
-var generateLogo = logo => {
-  if (isReactNode(logo)) {
-    return logo;
-  }
-  var {
-      icon,
-      iconAlt,
-      name,
-      nameAlt,
-      component: Component = "a"
-    } = logo,
-    props = _objectWithoutProperties(logo, _excluded);
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    className: "p-panel__logo"
-  }, props), /*#__PURE__*/React.createElement("img", {
-    className: "p-panel__logo-icon",
-    src: icon,
-    alt: iconAlt,
-    width: "24",
-    height: "24"
-  }), /*#__PURE__*/React.createElement("img", {
-    className: "p-panel__logo-name is-fading-when-collapsed",
-    src: name,
-    alt: nameAlt,
-    height: "16"
-  }));
-};
-
-/**
- * This is a [React](https://reactjs.org/) component for panels in the
- * [Vanilla](https://vanillaframework.io/docs/) layouts.
- *
- * The Panel component can be used in many areas of the application layout. It
- * can be the child element of `AppAside`, `AppMain`, `AppNavigation`, `AppNavigationBar`
- * and `AppStatus`.
- */
-var Panel = _ref => {
-  var {
-      forwardRef,
-      children,
-      className,
-      contentClassName,
-      controlsClassName,
-      controls,
-      dark,
-      header,
-      logo,
-      stickyHeader,
-      title,
-      titleClassName,
-      titleComponent: TitleComponent = "h4",
-      titleId,
-      toggle,
-      wrapContent = true
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded2);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: classNames("p-panel", className, {
-      "is-dark": dark
-    }),
-    ref: forwardRef
-  }), logo || title || controls || toggle ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("p-panel__header", {
-      "is-sticky": stickyHeader
-    })
-  }, logo ? generateLogo(logo) : /*#__PURE__*/React.createElement(TitleComponent, {
-    className: classNames("p-panel__title", titleClassName),
-    id: titleId
-  }, title), /*#__PURE__*/React.createElement("div", {
-    className: classNames("p-panel__controls", controlsClassName)
-  }, toggle ? /*#__PURE__*/React.createElement("span", {
-    role: "button",
-    tabIndex: 0,
-    className: "p-panel__toggle",
-    onClick: () => toggle.onClick(),
-    onKeyDown: () => toggle.onClick()
-  }, toggle.label) : null, controls)) : header, children && wrapContent ? /*#__PURE__*/React.createElement("div", {
-    className: classNames("p-panel__content", contentClassName)
-  }, children) : children);
-};
-export default Panel;

package/dist-esm/components/Panel/index.js

@@ -1 +0,0 @@
-export { default } from "./Panel";

package/dist-esm/components/PasswordToggle/PasswordToggle.js

@@ -1,90 +0,0 @@
-var _excluded = ["caution", "className", "error", "help", "id", "label", "readOnly", "required", "success", "type", "wrapperClassName"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
-import classNames from "classnames";
-import React, { useId, useState } from "react";
-import Button from "../Button";
-import Field from "../Field";
-import VanillaLabel from "../Label";
-export var Label = /*#__PURE__*/function (Label) {
-  Label["Hide"] = "Hide";
-  Label["Show"] = "Show";
-  return Label;
-}({});
-
-/**
- * The props for the Password Toggle component.
- */
-
-/**
- * This is a [React](https://reactjs.org/) component for the Vanilla [Password Toggle](https://docs.vanillaframework.io/base/forms/#password-toggle).
- *
- * It can be used when an input needs to obscure its value, whilst giving the user a way to reveal it if needed.
- */
-var PasswordToggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  var {
-      caution,
-      className,
-      error,
-      help,
-      id,
-      label,
-      readOnly,
-      required,
-      success,
-      type,
-      wrapperClassName
-    } = _ref,
-    inputProps = _objectWithoutProperties(_ref, _excluded);
-  var [isPassword, setIsPassword] = useState(true);
-  var validationId = useId();
-  var helpId = useId();
-  var hasError = !!error;
-  var defaultPasswordToggleId = useId();
-  var passwordToggleId = id || defaultPasswordToggleId;
-  var togglePassword = () => {
-    if (isPassword) {
-      setIsPassword(false);
-    } else {
-      setIsPassword(true);
-    }
-  };
-  return /*#__PURE__*/React.createElement(Field, {
-    caution: caution,
-    className: wrapperClassName,
-    error: error,
-    help: help,
-    helpId: helpId,
-    required: required,
-    success: success,
-    validationId: validationId
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "p-form-password-toggle"
-  }, /*#__PURE__*/React.createElement(VanillaLabel, {
-    forId: passwordToggleId,
-    required: required
-  }, label), /*#__PURE__*/React.createElement(Button, {
-    appearance: "base",
-    type: type ? type : "button",
-    className: "u-no-margin--bottom",
-    hasIcon: true,
-    "aria-controls": id,
-    "aria-live": "polite",
-    onClick: () => togglePassword()
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "p-form-password-toggle__label"
-  }, isPassword ? Label.Show : Label.Hide), /*#__PURE__*/React.createElement("i", {
-    className: isPassword ? "p-icon--show" : "p-icon--hide"
-  }))), /*#__PURE__*/React.createElement("input", _extends({
-    "aria-describedby": [help ? helpId : null, success ? validationId : null].filter(Boolean).join(" "),
-    "aria-errormessage": hasError ? validationId : null,
-    "aria-invalid": hasError,
-    className: classNames("p-form-validation__input", className),
-    id: passwordToggleId,
-    readOnly: readOnly,
-    ref: ref,
-    type: isPassword ? "password" : "text"
-  }, inputProps)));
-});
-export default PasswordToggle;

package/dist-esm/components/PasswordToggle/index.js

@@ -1 +0,0 @@
-export { default } from "./PasswordToggle";