@hashicorp/design-system-components 2.14.2 → 3.0.0

package/addon/components/hds/form/radio-card/index.js

@@ -12,10 +12,8 @@ import { setAriaDescribedBy } from '@hashicorp/design-system-components/utils/hd
 
 export const DEFAULT_CONTROL_POSITION = 'bottom';
 export const DEFAULT_ALIGNMENT = 'left';
-export const DEFAULT_LAYOUT = 'fluid';
 export const CONTROL_POSITIONS = ['bottom', 'left'];
 export const ALIGNMENTS = ['left', 'center'];
-export const LAYOUTS = ['fluid', 'fixed'];
 
 export default class HdsFormRadioCardIndexComponent extends Component {
   @tracked ariaDescribedBy = this.args.extraAriaDescribedBy;
@@ -71,34 +69,6 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     return alignment;
   }
 
-  /**
-   * Sets the layout of the card within the group
-   * Accepted values: fluid, fixed
-   *
-   * @param layout
-   * @type {string}
-   * @default 'fluid'
-   */
-  get layout() {
-    let { layout = DEFAULT_LAYOUT } = this.args;
-
-    assert(
-      `@layout for "Hds::Form::RadioCard" must be one of the following: ${LAYOUTS.join(
-        ', '
-      )}; received: ${layout}`,
-      LAYOUTS.includes(layout)
-    );
-
-    // if the `@layout` is set to 'fixed' we need a `@maxWidth` value to constrain the card to
-    if (layout === 'fixed') {
-      assert(
-        `@maxWidth for "Hds::Form::RadioCard" with @layout "fixed" is required`,
-        this.args.maxWidth
-      );
-    }
-    return layout;
-  }
-
   /**
    * Get the class names to apply to the component.
    * @method classNames
@@ -113,6 +83,11 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     if (this.args.disabled) {
       classes.push('hds-form-radio-card--disabled');
     }
+    if (this.args.maxWidth) {
+      classes.push('hds-form-radio-card--has-fixed-width');
+    } else {
+      classes.push('hds-form-radio-card--has-fluid-width');
+    }
 
     // add a class based on the @controlPosition argument
     classes.push(`hds-form-radio-card--control-${this.controlPosition}`);
@@ -120,9 +95,6 @@ export default class HdsFormRadioCardIndexComponent extends Component {
     // add a class based on the @alignment argument
     classes.push(`hds-form-radio-card--align-${this.alignment}`);
 
-    // add a class based on the @layout argument
-    classes.push(`hds-form-radio-card--layout-${this.layout}`);
-
     return classes.join(' ');
   }
 }

package/addon/components/hds/form/radio-card/label.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<span class="hds-form-radio-card__label hds-typography-display-300 hds-font-weight-bold" ...attributes>{{yield}}</span>
+<Hds::Text::Display
+  class="hds-form-radio-card__label"
+  @tag="span"
+  @size="300"
+  @weight="bold"
+  ...attributes
+>{{yield}}</Hds::Text::Display>

package/addon/components/hds/form/text-input/base.js

@@ -57,6 +57,11 @@ export default class HdsFormTextInputBaseComponent extends Component {
       classes.push(`hds-form-text-input--is-invalid`);
     }
 
+    // add a class based on the @hasVisibilityToggle argument
+    if (this.args.hasVisibilityToggle) {
+      classes.push(`hds-form-text-input--has-visibility-toggle`);
+    }
+
     // add a class based on the @isLoading argument
     if (this.args.isLoading) {
       classes.push(`hds-form-text-input--is-loading`);

package/addon/components/hds/form/text-input/field.hbs

@@ -14,16 +14,28 @@
   {{yield (hash Label=F.Label isRequired=F.isRequired isOptional=F.isOptional)}}
   {{yield (hash HelperText=F.HelperText Error=F.Error)}}
   <F.Control>
-    <Hds::Form::TextInput::Base
-      @type={{@type}}
-      @value={{@value}}
-      @isInvalid={{@isInvalid}}
-      @width={{@width}}
-      @isLoading={{@isLoading}}
-      required={{@isRequired}}
-      ...attributes
-      id={{F.id}}
-      aria-describedby={{F.ariaDescribedBy}}
-    />
+    <div class="hds-form-text-input__wrapper" {{style width=@width}}>
+      <Hds::Form::TextInput::Base
+        @type={{this.type}}
+        @value={{@value}}
+        @isInvalid={{@isInvalid}}
+        @isLoading={{@isLoading}}
+        @hasVisibilityToggle={{this.showVisibilityToggle}}
+        required={{@isRequired}}
+        ...attributes
+        id={{F.id}}
+        aria-describedby={{F.ariaDescribedBy}}
+      />
+      {{#if this.showVisibilityToggle}}
+        <Hds::Form::VisibilityToggle
+          @isVisible={{this.isPasswordMasked}}
+          @ariaLabel={{this.visibilityToggleAriaLabel}}
+          @ariaMessageText={{this.visibilityToggleAriaMessageText}}
+          aria-controls={{F.id}}
+          class="hds-form-text-input__visibility-toggle"
+          {{on "click" this.onClickTogglePasswordReadability}}
+        />
+      {{/if}}
+    </div>
   </F.Control>
 </Hds::Form::Field>

package/addon/components/hds/form/text-input/field.js

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+
+export default class HdsFormTextInputFieldComponent extends Component {
+  @tracked isPasswordMasked = true;
+  @tracked hasVisibilityToggle = this.args.hasVisibilityToggle ?? true;
+  @tracked type = this.args.type ?? 'text';
+
+  /**
+   * @param showVisibilityToggle
+   * @type {boolean}
+   * @default false
+   */
+  get showVisibilityToggle() {
+    return this.args.type === 'password' && this.hasVisibilityToggle;
+  }
+
+  /**
+   * @param visibilityToggleAriaLabel
+   * @type {string}
+   * @default 'Show password'
+   */
+  get visibilityToggleAriaLabel() {
+    if (this.args.visibilityToggleAriaLabel) {
+      return this.args.visibilityToggleAriaLabel;
+    } else if (this.isPasswordMasked) {
+      return 'Show password';
+    } else {
+      return 'Hide password';
+    }
+  }
+
+  /**
+   * @param visibilityToggleAriaMessageText
+   * @type {string}
+   * @default 'Password is now hidden'
+   */
+  get visibilityToggleAriaMessageText() {
+    if (this.args.visibilityToggleAriaMessageText) {
+      return this.args.visibilityToggleAriaMessageText;
+    } else if (this.isPasswordMasked) {
+      return 'Password is hidden';
+    } else {
+      return 'Password is visible';
+    }
+  }
+
+  @action
+  onClickTogglePasswordReadability() {
+    this.isPasswordMasked = !this.isPasswordMasked;
+    this.type = this.isPasswordMasked ? 'password' : 'text';
+  }
+}

package/addon/components/hds/form/visibility-toggle/index.hbs

@@ -0,0 +1,8 @@
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+<button class="hds-form-visibility-toggle" type="button" aria-label={{@ariaLabel}} ...attributes>
+  <FlightIcon @name={{if @isVisible "eye" "eye-off"}} @size="16" @isInlineBlock={{false}} />
+  <span class="sr-only" aria-live="polite">{{@ariaMessageText}}</span>
+</button>

package/addon/components/hds/interactive/{index.js → index.ts}

@@ -6,7 +6,25 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 
-export default class HdsInteractiveComponent extends Component {
+export interface HdsInteractiveSignature {
+  Args: {
+    href?: string;
+    isHrefExternal?: boolean;
+    isRouteExternal?: boolean;
+    route?: unknown;
+    models?: unknown;
+    model?: unknown;
+    query?: unknown;
+    'current-when'?: unknown;
+    replace?: unknown;
+  };
+  Blocks: {
+    default: [];
+  };
+  Element: HTMLAnchorElement | HTMLButtonElement;
+}
+
+export default class HdsInteractiveIndexComponent extends Component<HdsInteractiveSignature> {
   /**
    * Determines if a @href value is "external" (it adds target="_blank" rel="noopener noreferrer")
    *
@@ -30,9 +48,16 @@ export default class HdsInteractiveComponent extends Component {
   }
 
   @action
-  onKeyUp(event) {
+  onKeyUp(event: KeyboardEvent) {
     if (event.key === ' ' || event.code === 'Space') {
-      event.target.click();
+      (event.target as HTMLElement).click();
     }
   }
 }
+
+declare module '@glint/environment-ember-loose/registry' {
+  export default interface Registry {
+    'Hds::Interactive': typeof HdsInteractiveIndexComponent;
+    'hds/interactive': typeof HdsInteractiveIndexComponent;
+  }
+}

package/addon/components/hds/modal/header.hbs

@@ -6,13 +6,13 @@
   {{#if @icon}}
     <FlightIcon class="hds-modal__icon" @name={{@icon}} @size="24" @isInlineBlock={{false}} />
   {{/if}}
-  <div class="hds-modal__title hds-typography-display-300 hds-font-weight-semibold" id={{@id}}>
+  <Hds::Text::Display class="hds-modal__title" @tag="div" @size="300" @weight="semibold" id={{@id}}>
     {{#if @tagline}}
-      <div class="hds-modal__tagline hds-typography-body-100 hds-font-weight-regular">
+      <Hds::Text::Body class="hds-modal__tagline" @tag="div" @size="100" @weight="regular">
         {{@tagline}}
-      </div>
+      </Hds::Text::Body>
     {{/if}}
     {{yield}}
-  </div>
+  </Hds::Text::Display>
   <Hds::DismissButton class="hds-modal__dismiss" {{on "click" @onDismiss}} />
 </div>

package/addon/components/hds/page-header/description.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<p class="hds-foreground-primary hds-typography-body-200 hds-page-header__description" ...attributes>{{yield}}</p>
+<Hds::Text::Body
+  class="hds-page-header__description"
+  @tag="p"
+  @size="200"
+  @color="primary"
+  ...attributes
+>{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/subtitle.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<p class="hds-foreground-faint hds-typography-body-200 hds-page-header__subtitle" ...attributes>{{yield}}</p>
+<Hds::Text::Body
+  class="hds-page-header__subtitle"
+  @tag="p"
+  @size="200"
+  @color="faint"
+  ...attributes
+>{{yield}}</Hds::Text::Body>

package/addon/components/hds/page-header/title.hbs

@@ -2,4 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<h1 class="hds-foreground-strong hds-typography-display-500 hds-page-header__title" ...attributes>{{yield}}</h1>
+<Hds::Text::Display
+  class="hds-page-header__title"
+  @tag="h1"
+  @size="500"
+  @color="strong"
+  ...attributes
+>{{yield}}</Hds::Text::Display>

package/addon/components/hds/pagination/compact/index.js

@@ -7,15 +7,12 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { assert } from '@ember/debug';
-import { inject as service } from '@ember/service';
 
 // for context about the decision to use these values, see:
 // https://hashicorp.slack.com/archives/C03A0N1QK8S/p1673546329082759
 export const DEFAULT_PAGE_SIZES = [10, 30, 50];
 
 export default class HdsPaginationCompactIndexComponent extends Component {
-  @service router;
-
   // This private variable is used to differentiate between
   // "uncontrolled" component (where the state is handled internally) and
   // "controlled" component (where the state is handled externally, by the consumer's code).
@@ -109,10 +106,6 @@ export default class HdsPaginationCompactIndexComponent extends Component {
     return pageSizes;
   }
 
-  get routeQueryParams() {
-    return this.router.currentRoute?.queryParams || {};
-  }
-
   buildQueryParamsObject(page, pageSize) {
     if (this.isControlled) {
       return this.args.queryFunction(page, pageSize);
@@ -162,15 +155,6 @@ export default class HdsPaginationCompactIndexComponent extends Component {
   onPageSizeChange(newPageSize) {
     let { onPageSizeChange } = this.args;
 
-    // we need to manually update the query parameters in the route (it's not a link!)
-    if (this.isControlled) {
-      // we pass `null` as value for the `page` argument, so consumers can handle this condition accordingly (probably will just change the side of the data/array slice)
-      const queryParams = this.buildQueryParamsObject(null, newPageSize);
-      this.router.transitionTo({ queryParams });
-    } else {
-      this.currentPageSize = newPageSize;
-    }
-
     // invoke the callback function
     if (typeof onPageSizeChange === 'function') {
       onPageSizeChange(newPageSize);

package/addon/components/hds/pagination/info/index.hbs

@@ -2,10 +2,10 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<div class="hds-pagination-info hds-typography-body-100 hds-font-weight-medium" ...attributes>
+<Hds::Text::Body class="hds-pagination-info" @tag="div" @size="100" @weight="medium" ...attributes>
   {{@itemsRangeStart}}–{{@itemsRangeEnd}}
   {{#if this.showTotalItems}}
     of
     {{@totalItems}}
   {{/if}}
-</div>
+</Hds::Text::Body>

package/addon/components/hds/pagination/nav/arrow.hbs

@@ -6,9 +6,15 @@
   <Hds::Interactive class={{this.classNames}} aria-label={{this.content.ariaLabel}} disabled={{true}} ...attributes>
     <FlightIcon @name={{this.content.icon}} />
     {{#if this.showLabel}}
-      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+      <Hds::Text::Body
+        class="hds-pagination-nav__arrow-label"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+        aria-hidden="true"
+      >
         {{this.content.label}}
-      </span>
+      </Hds::Text::Body>
     {{/if}}
   </Hds::Interactive>
 {{else}}
@@ -24,9 +30,15 @@
   >
     <FlightIcon @name={{this.content.icon}} />
     {{#if this.showLabel}}
-      <span class="hds-pagination-nav__arrow-label" aria-hidden="true">
+      <Hds::Text::Body
+        class="hds-pagination-nav__arrow-label"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+        aria-hidden="true"
+      >
         {{this.content.label}}
-      </span>
+      </Hds::Text::Body>
     {{/if}}
   </Hds::Interactive>
 {{/if}}

package/addon/components/hds/pagination/nav/arrow.js

@@ -61,8 +61,6 @@ export default class HdsPaginationControlArrowComponent extends Component {
       'hds-pagination-nav__control',
       'hds-pagination-nav__arrow',
       `hds-pagination-nav__arrow--direction-${this.args.direction}`,
-      'hds-typography-body-100',
-      'hds-font-weight-medium',
     ];
 
     return classes.join(' ');

package/addon/components/hds/pagination/nav/number.hbs

@@ -12,5 +12,6 @@
   ...attributes
   aria-current={{if @isSelected "page" null}}
 >
-  <span class="sr-only">page </span>{{this.page}}
+  <Hds::Text::Body @tag="span" @size="100" @weight="medium"><span class="sr-only">page
+    </span>{{this.page}}</Hds::Text::Body>
 </Hds::Interactive>

package/addon/components/hds/pagination/nav/number.js

@@ -25,12 +25,7 @@ export default class HdsPaginationControlNumberComponent extends Component {
    * @return {string} The "class" attribute to apply to the component.
    */
   get classNames() {
-    let classes = [
-      'hds-pagination-nav__control',
-      'hds-pagination-nav__number',
-      'hds-typography-body-100',
-      'hds-font-weight-medium"',
-    ];
+    let classes = ['hds-pagination-nav__control', 'hds-pagination-nav__number'];
 
     if (this.args.isSelected) {
       classes.push(`hds-pagination-nav__number--is-selected`);

package/addon/components/hds/side-nav/list/index.hbs

@@ -4,7 +4,7 @@
 }}
 
 <nav class="hds-side-nav__list-wrapper" ...attributes>
-  {{yield (hash extraBefore=(component "hds/yield"))}}
+  {{yield (hash ExtraBefore=(component "hds/yield"))}}
   <ul class="hds-side-nav__list" role="list">
     {{yield
       (hash
@@ -15,5 +15,5 @@
       )
     }}
   </ul>
-  {{yield (hash extraAfter=(component "hds/yield"))}}
+  {{yield (hash ExtraAfter=(component "hds/yield"))}}
 </nav>

package/addon/components/hds/stepper/step/indicator.hbs

@@ -17,7 +17,12 @@
     {{else if (eq @status "complete")}}
       <FlightIcon class="hds-stepper-indicator-step__icon" @name="check" @size="16" />
     {{else}}
-      <span class="hds-stepper-indicator-step__text">{{@text}}</span>
+      <Hds::Text::Body
+        class="hds-stepper-indicator-step__text"
+        @tag="span"
+        @size="100"
+        @weight="medium"
+      >{{@text}}</Hds::Text::Body>
     {{/if}}
   </div>
 </div>

package/addon/components/hds/tag/index.hbs

@@ -2,7 +2,7 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-<span class={{this.classNames}} ...attributes>
+<Hds::Text::Body class={{this.classNames}} @tag="span" @size="100" @weight="medium" @color="primary" ...attributes>
   {{#if this.onDismiss}}
     <button class="hds-tag__dismiss" type="button" aria-label={{this.ariaLabel}} {{on "click" this.onDismiss}}>
       <FlightIcon class="hds-tag__dismiss-icon" @name="x" @size="16" @isInlineBlock={{false}} />
@@ -27,4 +27,4 @@
       {{this.text}}
     </span>
   {{/if}}
-</span>
+</Hds::Text::Body>

package/addon/modifiers/hds-clipboard.js

@@ -0,0 +1,163 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import { modifier } from 'ember-modifier';
+import { assert, warn } from '@ember/debug';
+
+export const getTextToCopy = (text) => {
+  let textToCopy;
+
+  if (text) {
+    if (typeof text === 'string') {
+      textToCopy = text;
+    } else if (
+      // context: https://github.com/hashicorp/design-system/pull/1564
+      typeof text === 'number' ||
+      typeof text === 'bigint'
+    ) {
+      textToCopy = text.toString();
+    } else {
+      assert(
+        `\`hds-clipboard\` modifier - \`text\` argument must be a string - provided: ${typeof text}`
+      );
+    }
+  }
+  return textToCopy;
+};
+
+export const getTargetElement = (target) => {
+  let targetElement;
+  if (typeof target === 'string') {
+    targetElement = document.querySelector(target);
+
+    if (!targetElement) {
+      console.error(
+        '`hds-clipboard` modifier - `target` selector provided does not point to an existing DOM node, check your selector string',
+        targetElement
+      );
+      return;
+    }
+  } else if (target instanceof Node && target.nodeType === Node.ELEMENT_NODE) {
+    targetElement = target;
+  } else {
+    if (target instanceof NodeList) {
+      assert(
+        '`hds-clipboard` modifier - `target` argument must be a string or a DOM node - provided: a list of DOM nodes'
+      );
+    } else {
+      assert(
+        `\`hds-clipboard\` modifier - \`target\` argument must be a string or a DOM node - provided: ${typeof target}`
+      );
+    }
+  }
+  return targetElement;
+};
+
+export const getTextToCopyFromTargetElement = (targetElement) => {
+  let textToCopy;
+  if (
+    targetElement instanceof Node &&
+    targetElement.nodeType === Node.ELEMENT_NODE
+  ) {
+    if (
+      targetElement instanceof HTMLInputElement || // targetElement.nodeName === 'INPUT' ||
+      targetElement instanceof HTMLTextAreaElement || // targetElement.nodeName === 'TEXTAREA' ||
+      targetElement instanceof HTMLSelectElement // targetElement.nodeName === 'SELECT'
+    ) {
+      textToCopy = targetElement.value;
+    } else {
+      // simplest approach
+      textToCopy = targetElement.innerText;
+
+      // approach based on text selection (left for backup just in case)
+      // var selection = window.getSelection();
+      // var range = document.createRange();
+      // selection.removeAllRanges();
+      // range.selectNodeContents(targetElement);
+      // selection.addRange(range);
+      // textToCopy = selection.toString();
+      // selection.removeAllRanges();
+    }
+  }
+  return textToCopy;
+};
+
+export const writeTextToClipboard = async (textToCopy) => {
+  // finally copy the text to the clipboard using the Clipboard API
+  // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
+  if (textToCopy) {
+    try {
+      // notice: the "clipboard-write" permission is granted automatically to pages when they are in the active tab
+      // https://developer.mozilla.org/en-US/docs/Web/API/Clipboard/write
+      await navigator.clipboard.writeText(textToCopy);
+      // DEBUG uncomment this for easy debugging
+      // console.log('success', textToCopy);
+      return true;
+    } catch (error) {
+      // clipboard write failed
+      // this probably never happens (see comment above) or happens only for very old browsers that don't for which `navigator.clipboard` is undefined
+      warn('copy action failed, please check your browser‘s permissions', {
+        id: 'hds-clipboard.write-text-to-clipboard.catch-error',
+      });
+      return false;
+    }
+  } else {
+    return false;
+  }
+};
+
+export const copyToClipboard = async (text, target) => {
+  let textToCopy;
+
+  if (text) {
+    textToCopy = getTextToCopy(text);
+  } else if (target) {
+    const targetElement = getTargetElement(target);
+    textToCopy = getTextToCopyFromTargetElement(targetElement);
+  } else {
+    assert(
+      '`hds-clipboard` modifier - either a `text` or a `target` argument is required'
+    );
+  }
+  const success = await writeTextToClipboard(textToCopy);
+  return success;
+};
+
+// Notice: we use a function-based modifier here instead of a class-based one
+// because it's quite simple in its logic, and doesn't require injecting services
+// see: https://github.com/ember-modifier/ember-modifier#function-based-modifiers
+
+export default modifier((element, positional, named) => {
+  assert(
+    '`hds-clipboard` modifier - the modifier must be applied to an element',
+    element
+  );
+
+  const { text, target, onSuccess, onError } = named;
+
+  const onClick = async (event) => {
+    const trigger = event.currentTarget;
+    const success = await copyToClipboard(text, target);
+
+    // fire the `onSuccess/onError` callbacks (if provided)
+    if (success) {
+      if (typeof onSuccess === 'function') {
+        onSuccess({ trigger, text, target });
+      }
+    } else {
+      if (typeof onError === 'function') {
+        onError({ trigger, text, target });
+      }
+    }
+  };
+
+  // add the "onClick" event listener to the element
+  element.addEventListener('click', onClick);
+
+  // this (teardown) function is run when the element is removed
+  return () => {
+    element.removeEventListener('click', onClick);
+  };
+});

package/addon/template-registry.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+import type HdsButtonIndexComponent from '@hashicorp/design-system-components/components/hds/button';
+import type HdsInteractiveIndexComponent from '@hashicorp/design-system-components/components/hds/interactive';
+
+export default interface HdsComponentsRegistry {
+  HdsButtonComponent: typeof HdsButtonIndexComponent;
+  HdsInteractiveComponent: typeof HdsInteractiveIndexComponent;
+}

package/app/components/hds/form/visibility-toggle/index.js

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) HashiCorp, Inc.
+ * SPDX-License-Identifier: MPL-2.0
+ */
+
+export { default } from '@hashicorp/design-system-components/components/hds/form/visibility-toggle/index';