@cloudscape-design/components 3.0.1006 → 3.0.1008

package/container/use-sticky-header.d.ts

@@ -1,33 +1,28 @@
 import { RefObject } from 'react';
 interface StickyHeaderContextProps {
-  isStuck: boolean;
-  isStuckAtBottom: boolean;
+    isStuck: boolean;
+    isStuckAtBottom: boolean;
 }
 interface ComputeOffsetProps {
-  isMobile: boolean;
-  __stickyOffset?: number;
-  __mobileStickyOffset?: number;
-  hasInnerOverflowParents: boolean;
-  __additionalOffset?: boolean;
+    isMobile: boolean;
+    __stickyOffset?: number;
+    __mobileStickyOffset?: number;
+    hasInnerOverflowParents: boolean;
+    __additionalOffset?: boolean;
 }
-export declare function computeOffset({
-  isMobile,
-  __stickyOffset,
-  __mobileStickyOffset,
-  hasInnerOverflowParents,
-  __additionalOffset
-}: ComputeOffsetProps): string;
+export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }: ComputeOffsetProps): string;
 export declare const StickyHeaderContext: import("react").Context<StickyHeaderContextProps>;
 export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean, __additionalOffset?: boolean) => {
-  isSticky: boolean;
-  isStuck: boolean;
-  isStuckAtBottom: boolean;
-  stickyStyles: {
-    style: {
-      top: string;
+    isSticky: boolean;
+    isStuck: boolean;
+    isStuckAtBottom: boolean;
+    stickyStyles: {
+        style: {
+            top: string;
+        };
+    } | {
+        style?: undefined;
     };
-  } | {
-    style?: undefined;
-  };
 };
-export {};
+export {};
+//# sourceMappingURL=use-sticky-header.d.ts.map

package/container/use-sticky-header.js

@@ -7,7 +7,7 @@ import { useMobile } from '../internal/hooks/use-mobile';
 import globalVars from '../internal/styles/global-vars';
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
 export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, __additionalOffset, }) {
-    const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0;
+    const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0);
     if (hasInnerOverflowParents || __stickyOffset !== undefined) {
         return `${localOffset}px`;
     }

package/container/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n  isStuckAtBottom: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n  __additionalOffset?: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n  __additionalOffset,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n  isStuckAtBottom: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile?: boolean,\n  __additionalOffset = false\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  const [isStuckAtBottom, setIsStuckAtBottom] = useState(false);\n\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n    __additionalOffset,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(\n    ({ isTrusted, target, type }) => {\n      if (type === 'resize' && target === window && !isTrusted) {\n        // The window size didn't actually change, it was a synthetic event\n        return;\n      }\n      if (rootRef.current && headerRef.current) {\n        const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n\n        // Using Math.round to adjust for rounding errors in floating-point arithmetic and timing issues\n        const rootTop = Math.round(rootRef.current.getBoundingClientRect().top + rootTopBorderWidth);\n        const headerTop = Math.round(headerRef.current.getBoundingClientRect().top);\n        if (rootTop < headerTop) {\n          setIsStuck(true);\n        } else {\n          setIsStuck(false);\n        }\n\n        const rootBottom = Math.round(rootRef.current.getBoundingClientRect().bottom - rootTopBorderWidth);\n        const headerBottom = Math.round(headerRef.current.getBoundingClientRect().bottom);\n        if (rootBottom <= headerBottom) {\n          setIsStuckAtBottom(true);\n        } else {\n          setIsStuckAtBottom(false);\n        }\n      }\n    },\n    [rootRef, headerRef]\n  );\n\n  useEffect(() => {\n    if (isSticky) {\n      const controller = new AbortController();\n      window.addEventListener('scroll', checkIfStuck, { capture: true, signal: controller.signal });\n      window.addEventListener('resize', checkIfStuck, { signal: controller.signal });\n      return () => {\n        controller.abort();\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    isStuckAtBottom,\n    stickyStyles,\n  };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createContext, RefObject, useCallback, useEffect, useLayoutEffect, useState } from 'react';\n\nimport { findUpUntil } from '@cloudscape-design/component-toolkit/dom';\n\nimport * as tokens from '../internal/generated/styles/tokens';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n  isStuckAtBottom: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n  __additionalOffset?: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n  __additionalOffset,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : (__stickyOffset ?? 0);\n  if (hasInnerOverflowParents || __stickyOffset !== undefined) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px + ${__additionalOffset ? tokens.spaceScaledS : '0px'})`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n  isStuckAtBottom: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile?: boolean,\n  __additionalOffset = false\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  const [isStuckAtBottom, setIsStuckAtBottom] = useState(false);\n\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n    __additionalOffset,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(\n    ({ isTrusted, target, type }) => {\n      if (type === 'resize' && target === window && !isTrusted) {\n        // The window size didn't actually change, it was a synthetic event\n        return;\n      }\n      if (rootRef.current && headerRef.current) {\n        const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n\n        // Using Math.round to adjust for rounding errors in floating-point arithmetic and timing issues\n        const rootTop = Math.round(rootRef.current.getBoundingClientRect().top + rootTopBorderWidth);\n        const headerTop = Math.round(headerRef.current.getBoundingClientRect().top);\n        if (rootTop < headerTop) {\n          setIsStuck(true);\n        } else {\n          setIsStuck(false);\n        }\n\n        const rootBottom = Math.round(rootRef.current.getBoundingClientRect().bottom - rootTopBorderWidth);\n        const headerBottom = Math.round(headerRef.current.getBoundingClientRect().bottom);\n        if (rootBottom <= headerBottom) {\n          setIsStuckAtBottom(true);\n        } else {\n          setIsStuckAtBottom(false);\n        }\n      }\n    },\n    [rootRef, headerRef]\n  );\n\n  useEffect(() => {\n    if (isSticky) {\n      const controller = new AbortController();\n      window.addEventListener('scroll', checkIfStuck, { capture: true, signal: controller.signal });\n      window.addEventListener('resize', checkIfStuck, { signal: controller.signal });\n      return () => {\n        controller.abort();\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    isStuckAtBottom,\n    stickyStyles,\n  };\n};\n"]}

package/content-layout/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
 import { ContentLayoutProps } from './interfaces';
 export { ContentLayoutProps };
-export default function ContentLayout(props: ContentLayoutProps): JSX.Element;
+export default function ContentLayout(props: ContentLayoutProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/content-layout/interfaces.d.ts

@@ -1,71 +1,72 @@
 /// <reference types="react" />
 import { BaseComponentProps } from '../internal/base-component';
 export interface ContentLayoutProps extends BaseComponentProps {
-  /**
-   * Use this slot to render the main content of the layout below the header.
-   * @displayname content
-   */
-  children?: React.ReactNode;
-  /**
-   * Determines whether the layout has an overlap between the header and content.
-   * If true, the overlap will be removed.
-   * @visualrefresh
-   */
-  disableOverlap?: boolean;
-  /**
-   * Use this slot to render the header content for the layout.
-   */
-  header?: React.ReactNode;
-  /**
-   * Determines the visual treatment for the header. Specifically:
-   * * `default` - Does not apply any visual treatment.
-   * * `high-contrast` - Applies high-contrast to the background of the header and the elements contained within it.
-   *     If you are using the AppLayout component, set `headerVariant="high-contrast"` to apply the same treatment to the breadcrumbs and notifications slots.
-   * * `divider` - Adds a horizontal separator between the header and the content.
-   * @visualrefresh `high-contrast` headerVariant
-   */
-  headerVariant?: 'default' | 'high-contrast' | 'divider';
-  /**
-   * Maximum width for the content.
-   * If set, all elements of the content layout (header, content, notifications, breadcrumbs) will be center-aligned and have the desired maximum width.
-   * If not set, all elements will occupy the full available width.
-   */
-  maxContentWidth?: number;
-  /**
-   * Set it to `true` if your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
-   * In that case, the content layout will become sensitive to the state of drawers in app layout and leave the necessary padding to avoid visual overlap with those elements.
-   */
-  defaultPadding?: boolean;
-  /**
-   * Use this slot to display [notifications](/components/flashbar/) to the content layout:
-   * * If your page does not use the [app layout component](/components/app-layout/), which already offers a `notifications` slot.
-   * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
-   *
-   * Do not use in conjunction with the `notifications` slot in the [app layout component](/components/app-layout/).
-   */
-  notifications?: React.ReactNode;
-  /**
-   * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the content layout:
-   * * if your application does not use the [app layout component](/components/app-layout/), which already offers a `breadcrumbs` slot.
-   * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
-   *
-   * Do not use in conjunction with the `breadcrumbs` slot in the [app layout component](/components/app-layout/).
-   */
-  breadcrumbs?: React.ReactNode;
-  /**
-   * Use this property to style the background of the header.
-   *
-   * It can be:
-   * * a string representing the CSS `background` value for the header element.
-   * * a function that receives the mode ("light" or "dark") as a parameter and returns a string.
-   *
-   *  The header background spans across the full available width, independent of the specified `maxContentWidth`.
-   *  If set, the component will not add the default background color to the header.
-   */
-  headerBackgroundStyle?: string | ((mode: 'light' | 'dark') => string);
-  /**
-   * Use this slot to add a secondary element inside the header. The secondary element will be displayed next to main header and occupy 25% of the available space.
-   * Note that the secondary header will not have a high-contrast treatement, even if you set `headerVariant` to `high-contrast`.
-   */
-  secondaryHeader?: React.ReactNode;
-}
+    /**
+     * Use this slot to render the main content of the layout below the header.
+     * @displayname content
+     */
+    children?: React.ReactNode;
+    /**
+     * Determines whether the layout has an overlap between the header and content.
+     * If true, the overlap will be removed.
+     * @visualrefresh
+     */
+    disableOverlap?: boolean;
+    /**
+     * Use this slot to render the header content for the layout.
+     */
+    header?: React.ReactNode;
+    /**
+     * Determines the visual treatment for the header. Specifically:
+     * * `default` - Does not apply any visual treatment.
+     * * `high-contrast` - Applies high-contrast to the background of the header and the elements contained within it.
+     *     If you are using the AppLayout component, set `headerVariant="high-contrast"` to apply the same treatment to the breadcrumbs and notifications slots.
+     * * `divider` - Adds a horizontal separator between the header and the content.
+     * @visualrefresh `high-contrast` headerVariant
+     */
+    headerVariant?: 'default' | 'high-contrast' | 'divider';
+    /**
+     * Maximum width for the content.
+     * If set, all elements of the content layout (header, content, notifications, breadcrumbs) will be center-aligned and have the desired maximum width.
+     * If not set, all elements will occupy the full available width.
+     */
+    maxContentWidth?: number;
+    /**
+     * Set it to `true` if your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     * In that case, the content layout will become sensitive to the state of drawers in app layout and leave the necessary padding to avoid visual overlap with those elements.
+     */
+    defaultPadding?: boolean;
+    /**
+     * Use this slot to display [notifications](/components/flashbar/) to the content layout:
+     * * If your page does not use the [app layout component](/components/app-layout/), which already offers a `notifications` slot.
+     * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     *
+     * Do not use in conjunction with the `notifications` slot in the [app layout component](/components/app-layout/).
+     */
+    notifications?: React.ReactNode;
+    /**
+     * Use this slot to add the [breadcrumb group component](/components/breadcrumb-group/) to the content layout:
+     * * if your application does not use the [app layout component](/components/app-layout/), which already offers a `breadcrumbs` slot.
+     * * If your page uses the [app layout component](/components/app-layout/) with `disableContentPaddings=true`.
+     *
+     * Do not use in conjunction with the `breadcrumbs` slot in the [app layout component](/components/app-layout/).
+     */
+    breadcrumbs?: React.ReactNode;
+    /**
+     * Use this property to style the background of the header.
+     *
+     * It can be:
+     * * a string representing the CSS `background` value for the header element.
+     * * a function that receives the mode ("light" or "dark") as a parameter and returns a string.
+     *
+     *  The header background spans across the full available width, independent of the specified `maxContentWidth`.
+     *  If set, the component will not add the default background color to the header.
+     */
+    headerBackgroundStyle?: string | ((mode: 'light' | 'dark') => string);
+    /**
+     * Use this slot to add a secondary element inside the header. The secondary element will be displayed next to main header and occupy 25% of the available space.
+     * Note that the secondary header will not have a high-contrast treatement, even if you set `headerVariant` to `high-contrast`.
+     */
+    secondaryHeader?: React.ReactNode;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/content-layout/internal.d.ts

@@ -2,18 +2,6 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { ContentLayoutProps } from './interfaces';
 type InternalContentLayoutProps = ContentLayoutProps & InternalBaseComponentProps;
-export default function InternalContentLayout({
-  children,
-  disableOverlap,
-  header,
-  headerVariant,
-  headerBackgroundStyle,
-  __internalRootRef,
-  maxContentWidth,
-  breadcrumbs,
-  notifications,
-  defaultPadding,
-  secondaryHeader,
-  ...rest
-}: InternalContentLayoutProps): JSX.Element;
-export {};
+export default function InternalContentLayout({ children, disableOverlap, header, headerVariant, headerBackgroundStyle, __internalRootRef, maxContentWidth, breadcrumbs, notifications, defaultPadding, secondaryHeader, ...rest }: InternalContentLayoutProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/contexts/form-field.d.ts

@@ -1 +1,2 @@
-export { FormFieldValidationControlProps as FormFieldContextValue, useFormFieldContext } from '../internal/context/form-field-context';
+export { FormFieldValidationControlProps as FormFieldContextValue, useFormFieldContext, } from '../internal/context/form-field-context';
+//# sourceMappingURL=form-field.d.ts.map

package/copy-to-clipboard/index.d.ts

@@ -1,8 +1,5 @@
 /// <reference types="react" />
 import { CopyToClipboardProps } from './interfaces';
 export { CopyToClipboardProps };
-export default function CopyToClipboard({
-  variant,
-  popoverRenderWithPortal,
-  ...restProps
-}: CopyToClipboardProps): JSX.Element;
+export default function CopyToClipboard({ variant, popoverRenderWithPortal, ...restProps }: CopyToClipboardProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/copy-to-clipboard/interfaces.d.ts

@@ -1,58 +1,59 @@
 import { BaseComponentProps } from '../internal/base-component';
 export interface CopyToClipboardProps extends BaseComponentProps {
-  /** Determines the general styling of the copy button as follows:
-   *
-   * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.
-   * * `icon` to display a standalone icon-only (no text) button.
-   * * `inline` to display an icon-only (no text) button within a text context.
-   *
-   * Defaults to `button`.
-   */
-  variant?: CopyToClipboardProps.Variant;
-  /**
-   * The text of the copy button (for variant="button").
-   */
-  copyButtonText?: string;
-  /**
-   * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,
-   * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.
-   */
-  copyButtonAriaLabel?: string;
-  /**
-   * The text content to be copied. It is displayed next to the copy button when `variant="inline"` unless when `content` is specified, and is not shown otherwise.
-   */
-  textToCopy: string;
-  /**
-   * The text content to display next to the copy button when `variant="inline"`. If not provided, `textToCopy` will be displayed instead.
-   */
-  textToDisplay?: string;
-  /**
-   * The message shown when the text is copied successfully.
-   */
-  copySuccessText: string;
-  /**
-   * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).
-   */
-  copyErrorText: string;
-  /**
-   * By default, the popover is constrained to fit inside its parent
-   * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
-   * Enabling this property will allow the popover to be rendered in the root stack context using
-   * [React Portals](https://reactjs.org/docs/portals.html).
-   * Enable this setting if you need the popover to ignore its parent stacking context.
-   */
-  popoverRenderWithPortal?: boolean;
-  /**
-   * Renders the copy to clipboard button as disabled and prevents clicks.
-   */
-  disabled?: boolean;
-  /**
-   * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).
-   * If provided, the copy to clipboard button becomes focusable.
-   * Applicable for all variants except inline.
-   */
-  disabledReason?: string;
+    /** Determines the general styling of the copy button as follows:
+     *
+     * * `button` to display a standalone secondary button with an icon, and `copyButtonText` as text.
+     * * `icon` to display a standalone icon-only (no text) button.
+     * * `inline` to display an icon-only (no text) button within a text context.
+     *
+     * Defaults to `button`.
+     */
+    variant?: CopyToClipboardProps.Variant;
+    /**
+     * The text of the copy button (for variant="button").
+     */
+    copyButtonText?: string;
+    /**
+     * Adds `aria-label` to the copy button. Use this to provide an accessible name for buttons that don't have visible text,
+     * and to distinguish between multiple buttons with identical visible text. The text will also be added to the `title` attribute of the button.
+     */
+    copyButtonAriaLabel?: string;
+    /**
+     * The text content to be copied. It is displayed next to the copy button when `variant="inline"` unless when `content` is specified, and is not shown otherwise.
+     */
+    textToCopy: string;
+    /**
+     * The text content to display next to the copy button when `variant="inline"`. If not provided, `textToCopy` will be displayed instead.
+     */
+    textToDisplay?: string;
+    /**
+     * The message shown when the text is copied successfully.
+     */
+    copySuccessText: string;
+    /**
+     * The message shown when the text is not copied due to an error, see [https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext](https://w3c.github.io/clipboard-apis/#dom-clipboard-writetext).
+     */
+    copyErrorText: string;
+    /**
+     * By default, the popover is constrained to fit inside its parent
+     * [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context).
+     * Enabling this property will allow the popover to be rendered in the root stack context using
+     * [React Portals](https://reactjs.org/docs/portals.html).
+     * Enable this setting if you need the popover to ignore its parent stacking context.
+     */
+    popoverRenderWithPortal?: boolean;
+    /**
+     * Renders the copy to clipboard button as disabled and prevents clicks.
+     */
+    disabled?: boolean;
+    /**
+     * Provides a reason why the copy to clipboard button is disabled (only when `disabled` is `true`).
+     * If provided, the copy to clipboard button becomes focusable.
+     * Applicable for all variants except inline.
+     */
+    disabledReason?: string;
 }
 export declare namespace CopyToClipboardProps {
-  type Variant = 'button' | 'icon' | 'inline';
-}
+    type Variant = 'button' | 'icon' | 'inline';
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/copy-to-clipboard/internal.d.ts

@@ -1,19 +1,8 @@
 /// <reference types="react" />
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { CopyToClipboardProps } from './interfaces';
-interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {}
-export default function InternalCopyToClipboard({
-  variant,
-  copyButtonAriaLabel,
-  copyButtonText,
-  copySuccessText,
-  copyErrorText,
-  textToCopy,
-  textToDisplay,
-  popoverRenderWithPortal,
-  disabled,
-  disabledReason,
-  __internalRootRef,
-  ...restProps
-}: InternalCopyToClipboardProps): JSX.Element;
-export {};
+interface InternalCopyToClipboardProps extends CopyToClipboardProps, InternalBaseComponentProps {
+}
+export default function InternalCopyToClipboard({ variant, copyButtonAriaLabel, copyButtonText, copySuccessText, copyErrorText, textToCopy, textToDisplay, popoverRenderWithPortal, disabled, disabledReason, __internalRootRef, ...restProps }: InternalCopyToClipboardProps): JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/date-input/index.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { DateInputProps } from './interfaces';
 export { DateInputProps };
 declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
-export default DateInput;
+export default DateInput;
+//# sourceMappingURL=index.d.ts.map

package/date-input/interfaces.d.ts

@@ -2,11 +2,12 @@ import { BaseInputProps, InputProps } from '../input/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
 export interface DateInputProps extends BaseInputProps, FormFieldValidationControlProps, BaseComponentProps {
-  /**
-   * The current input value, in YYYY-MM-DD format.
-   */
-  value: string;
+    /**
+     * The current input value, in YYYY-MM-DD format.
+     */
+    value: string;
 }
 export declare namespace DateInputProps {
-  type Ref = InputProps.Ref;
-}
+    type Ref = InputProps.Ref;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/date-input/internal.d.ts

@@ -3,6 +3,7 @@ import { CalendarProps } from '../calendar/interfaces';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { DateInputProps } from './interfaces';
 declare const InternalDateInput: React.ForwardRefExoticComponent<DateInputProps & InternalBaseComponentProps<any> & {
-  granularity?: CalendarProps.Granularity | undefined;
+    granularity?: CalendarProps.Granularity | undefined;
 } & React.RefAttributes<HTMLInputElement>>;
-export default InternalDateInput;
+export default InternalDateInput;
+//# sourceMappingURL=internal.d.ts.map

package/date-input/utils.d.ts

@@ -1,9 +1,7 @@
 import { CalendarProps } from '../calendar/interfaces';
 import { MaskArgs } from '../internal/components/masked-input/utils/mask-format';
 export interface GenerateMaskArgsProps extends Pick<CalendarProps, 'granularity'> {
-  isIso?: boolean;
+    isIso?: boolean;
 }
-export declare const generateMaskArgs: ({
-  granularity,
-  isIso
-}?: GenerateMaskArgsProps) => MaskArgs;
+export declare const generateMaskArgs: ({ granularity, isIso, }?: GenerateMaskArgsProps) => MaskArgs;
+//# sourceMappingURL=utils.d.ts.map

package/date-picker/index.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 import { DatePickerProps } from './interfaces';
 export { DatePickerProps };
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<DatePickerProps.Ref>>;
-export default DatePicker;
+export default DatePicker;
+//# sourceMappingURL=index.d.ts.map