@workday/canvas-kit-docs 6.0.0-alpha.0-next.30 → 6.0.0-alpha.0-next.36

package/dist/mdx/preview-react/text-input/examples/Disabled.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} disabled />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/Error.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {
@@ -32,12 +31,10 @@ export default () => {
   };
 
   return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput hasError={hasError}>
-        <TextInput.Label>A three letter word</TextInput.Label>
-        <TextInput.Field onChange={handleChange} value={value} />
-        <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
-      </TextInput>
-    </VStack>
+    <TextInput hasError={hasError} orientation='vertical'>
+      <TextInput.Label>A three letter word</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+      <TextInput.Hint paddingTop={space.xxs}>{hint}</TextInput.Hint>
+    </TextInput>
   );
 };

package/dist/mdx/preview-react/text-input/examples/Grow.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical' alignItems='stretch'>
+      <TextInput.Label>Street Address</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/HiddenLabel.tsx

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import { accessibleHide } from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical' spacing='zero'>
+      <TextInput.Label css={{...accessibleHide}}>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/LabelPositionHorizontal.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='horizontal'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/LabelPositionVertical.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical' spacing='xxxs'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/LoginForm.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 import {useFormik} from 'formik';
 import * as yup from 'yup';
 
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {HStack, VStack} from '@workday/canvas-kit-labs-react/layout';
 import {IconButton, PrimaryButton} from '@workday/canvas-kit-react/button';
 import {visibleIcon, invisibleIcon} from '@workday/canvas-system-icons-web';
@@ -48,8 +48,12 @@ export default () => {
 
   return (
     <form onSubmit={formik.handleSubmit} action=".">
-      <VStack spacing="xs" alignItems="flex-start">
-        <TextInput isRequired={true} hasError={formik.touched.email && !!formik.errors.email}>
+      <VStack spacing='xs' alignItems='flex-start'>
+        <TextInput
+          orientation='vertical'
+          isRequired={true}
+          hasError={formik.touched.email && !!formik.errors.email}
+        >
           <TextInput.Label>Email</TextInput.Label>
           <TextInput.Field
             name="email"
@@ -62,7 +66,8 @@ export default () => {
           <TextInput.Hint>{formik.touched.email && formik.errors.email}</TextInput.Hint>
         </TextInput>
         <TextInput
-          inputId={passwordId}
+          orientation='vertical'
+          id={passwordId}
           hasError={formik.touched.password && !!formik.errors.password}
           isRequired={true}
         >
@@ -81,7 +86,7 @@ export default () => {
               type="button"
               icon={showPassword ? invisibleIcon : visibleIcon}
               aria-label={showPassword ? 'Hide Password' : 'Show Password'}
-              aria-controls={passwordId}
+              aria-controls={`input-${passwordId}`}
               onClick={() => {
                 setShowPassword(state => !state);
                 passwordRef.current.focus();

package/dist/mdx/preview-react/text-input/examples/Password.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('SuperSecret1');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Password</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} type="password" />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/Placeholder.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} placeholder="user@email.com" />
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/RefForwarding.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
+import {changeFocus} from '@workday/canvas-kit-react/common';
 import {VStack} from '@workday/canvas-kit-labs-react/layout';
-import {PrimaryButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 
 export default () => {
   const [value, setValue] = React.useState('');
@@ -12,16 +13,16 @@ export default () => {
   };
 
   const handleClick = () => {
-    ref.current.focus();
+    changeFocus(ref.current)
   };
 
   return (
-    <VStack spacing="xxxs" alignItems="flex-start">
-      <TextInput>
+    <VStack spacing='xxxs' alignItems='flex-start'>
+      <TextInput orientation='vertical'>
         <TextInput.Label>Email</TextInput.Label>
         <TextInput.Field onChange={handleChange} value={value} ref={ref} />
       </TextInput>
-      <PrimaryButton onClick={handleClick}>Focus Text Input</PrimaryButton>
+      <SecondaryButton onClick={handleClick}>Focus Text Input</SecondaryButton>
     </VStack>
   );
 };

package/dist/mdx/preview-react/text-input/examples/Required.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+
+export default () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  return (
+    <TextInput isRequired={true} orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field onChange={handleChange} value={value} />
+    </TextInput>
+  );
+};

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -0,0 +1,46 @@
+/** @jsx jsx */
+import {jsx} from '@emotion/core';
+import React from 'react';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
+import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
+
+export default () => {
+  const theme: PartialEmotionCanvasTheme = {
+    canvas: {
+      palette: {
+        common: {
+          focusOutline: colors.grapeSoda300,
+        },
+        alert: {
+          main: colors.kiwi200,
+          darkest: colors.kiwi600,
+        },
+      },
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <AlertInput />
+    </CanvasProvider>
+  );
+};
+
+const AlertInput = () => {
+  const [value, setValue] = React.useState('invalid@email');
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue(event.target.value);
+  };
+
+  const alertStyles = useThemedRing('alert');
+
+  return (
+    <TextInput orientation='vertical'>
+      <TextInput.Label>Email</TextInput.Label>
+      <TextInput.Field css={alertStyles} onChange={handleChange} value={value} />
+      <TextInput.Hint paddingTop={space.xxs}>Please enter a valid email.</TextInput.Hint>
+    </TextInput>
+  );
+};

package/dist/mdx/{labs-react → preview-react}/text-input/examples/ThemedError.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import {TextInput} from '@workday/canvas-kit-labs-react/text-input';
-import {VStack} from '@workday/canvas-kit-labs-react/layout';
+import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
 import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 
@@ -26,15 +25,13 @@ export default () => {
 
   return (
     <CanvasProvider theme={theme}>
-      <VStack spacing="xxxs" alignItems="flex-start">
-        <TextInput hasError={!value} isRequired={true}>
-          <TextInput.Label>Email</TextInput.Label>
-          <TextInput.Field onChange={handleChange} value={value} />
-          <TextInput.Hint paddingTop={space.xxs}>
-            {!value && 'Please enter an email.'}
-          </TextInput.Hint>
-        </TextInput>
-      </VStack>
+      <TextInput hasError={!value} isRequired={true} orientation='vertical'>
+        <TextInput.Label>Email</TextInput.Label>
+        <TextInput.Field onChange={handleChange} value={value} />
+        <TextInput.Hint paddingTop={space.xxs}>
+          {!value && 'Please enter an email.'}
+        </TextInput.Hint>
+      </TextInput>
     </CanvasProvider>
   );
 };

package/dist/mdx/react/_examples/GlobalHeader.mdx

@@ -0,0 +1,9 @@
+import Basic from './examples/GlobalHeader';
+
+
+# Canvas Kit Examples
+
+## GlobalHeader
+Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/PageHeader.mdx

@@ -0,0 +1,8 @@
+import {Basic} from "./examples/PageHeader";
+
+
+# Canvas Kit Examples
+
+## PageHeader
+
+<ExampleCodeBlock code={Basic} />

package/dist/mdx/react/_examples/examples/GlobalHeader.tsx

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import {styled, createComponent, dubLogoBlue} from '@workday/canvas-kit-react/common';
+import {colors, depth, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {
+  notificationsIcon,
+  inboxIcon,
+  justifyIcon,
+  assistantIcon,
+} from '@workday/canvas-system-icons-web';
+
+import {IconButton, Hyperlink} from '@workday/canvas-kit-react/button';
+import {Avatar} from '@workday/canvas-kit-react/avatar';
+import {SearchForm, HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <GlobalHeader>
+    <GlobalHeader.Item>
+      <IconButton aria-label="menu" icon={justifyIcon} />
+      <Hyperlink>
+        <WorkdayLogo dangerouslySetInnerHTML={{__html: dubLogoBlue}} />
+      </Hyperlink>
+    </GlobalHeader.Item>
+    <GlobalHeader.Item margin="auto" width="100%" maxWidth={`calc(${space.xxxl} * 6)`}>
+      <SearchForm onSubmit={() => 1} />
+    </GlobalHeader.Item>
+    <GlobalHeader.Item>
+      <IconButton aria-label="messages" icon={assistantIcon} />
+      <IconButton aria-label="notifications" icon={notificationsIcon} />
+      <IconButton aria-label="inbox" icon={inboxIcon} />
+      <Avatar size={Avatar.Size.m} variant={Avatar.Variant.Light} />
+    </GlobalHeader.Item>
+  </GlobalHeader>
+);
+
+const GlobalHeaderItem = createComponent('div')({
+  displayName: 'GlobalHeader.Item',
+  Component: ({spacing = 's', ...props}: HeaderItemProps, ref) => (
+    <HStack spacing={spacing} alignItems="center" marginX={space.xs} ref={ref} {...props} />
+  ),
+});
+
+const GlobalHeader = createComponent('header')({
+  displayName: 'GlobalHeader',
+  Component: (props, ref, Element) => <HeaderWrapper ref={ref} as={Element} {...props} />,
+  subComponents: {Item: GlobalHeaderItem},
+});
+
+const HeaderWrapper = styled('header')({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  boxSizing: 'border-box',
+  ...type.levels.subtext.large,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  backgroundColor: colors.frenchVanilla100,
+  ...depth[1],
+  padding: space.xxs,
+});
+
+const WorkdayLogo = styled('span')({lineHeight: 0});

package/dist/mdx/react/_examples/examples/PageHeader.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import {styled, createComponent} from '@workday/canvas-kit-react/common';
+
+import {colors, gradients, space, type} from '@workday/canvas-kit-react/tokens';
+
+import {HStack, HStackProps, StackSpacing} from '@workday/canvas-kit-labs-react';
+import {IconButton} from '@workday/canvas-kit-react/button';
+import {justifyIcon, notificationsIcon} from '@workday/canvas-system-icons-web';
+
+interface HeaderItemProps extends Omit<HStackProps, 'spacing'> {
+  spacing?: StackSpacing;
+}
+
+export default () => (
+  <PageHeader>
+    <PageHeader.Title>Page Header</PageHeader.Title>
+    <PageHeader.Item>
+      <IconButton aria-label="notifications" icon={notificationsIcon} variant="inverse" />
+      <IconButton aria-label="menu" icon={justifyIcon} variant="inverse" />
+    </PageHeader.Item>
+  </PageHeader>
+);
+
+const PageHeaderItem = createComponent('div')({
+  displayName: 'PageHeader.Item',
+  Component: ({spacing = 'xxs', ...props}: HeaderItemProps, ref, Element) => (
+    <HStack spacing={spacing} ref={ref} as={Element} {...props} />
+  ),
+});
+
+const PageHeaderTitle = createComponent('h2')({
+  displayName: 'PageHeader.Title',
+  Component: ({children, ...props}, ref, Element) => (
+    <Title ref={ref} as={Element} {...props}>
+      {children}
+    </Title>
+  ),
+});
+
+const PageHeader = createComponent('header')({
+  displayName: 'PageHeader',
+  Component: (props, ref, Element) => <Header ref={ref} as={Element} {...props} />,
+  subComponents: {Item: PageHeaderItem, Title: PageHeaderTitle},
+});
+
+const Header = styled('header')({
+  padding: `${space.xs} ${space.xl}`,
+  backgroundImage: gradients.blueberry,
+  color: colors.frenchVanilla100,
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+});
+
+const Title = styled('h2')({
+  ...type.levels.heading.medium,
+  color: colors.frenchVanilla100,
+  padding: `${space.xs} 0`,
+  margin: 0,
+  whiteSpace: 'nowrap',
+});

package/dist/mdx/react/action-bar/ActionBar.mdx

@@ -51,6 +51,6 @@ At 575px, responsive styles will take effect:
 
 ## Props
 
-Undocumented props are spread to the underlying container `div` element.
+Undocumented props are spread to the underlying container `<div>` element.
 
 <ArgsTable of={ActionBar} />

package/dist/mdx/react/button/button/Button.mdx

@@ -51,7 +51,7 @@ when you need to place a Primary Button on a dark or colorful background such as
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={PrimaryButton} />
 
@@ -73,7 +73,7 @@ a dark or colorful background such as `blueberry400`.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={SecondaryButton} />
 
@@ -97,7 +97,7 @@ a dark or colorful background such as `blueberry400`.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={TertiaryButton} />
 
@@ -111,16 +111,16 @@ before deleting.
 
 #### Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={DeleteButton} />
 
 ### Accessible Use of the `as` Prop
 
 Like many of our components, Buttons accept an `as` prop, which lets you change the underlying
-semantic element - usually an `a` (anchor), or a `button`. This should be done with caution to
-ensure the best accessibility. Generally, `button` elements should be used for actions, and `a`
-(anchor) elements should be used for navigation.
+semantic element - usually an `<a>`, or a `<button>`. This should be done with caution to ensure the
+best accessibility. Generally, `<button>` elements should be used for actions, and `<a>` elements
+should be used for navigation.
 
 ## Specifications
 

package/dist/mdx/react/button/icon-button/IconButton.mdx

@@ -98,6 +98,6 @@ The `toggle` prop can be used to make icon buttons toggleable.
 
 ## Props
 
-Undocumented props are spread to the underlying `button` element.
+Undocumented props are spread to the underlying `<button>` element.
 
 <ArgsTable of={IconButton} />

package/dist/mdx/react/loading-animation/LoadingAnimation.mdx

@@ -1,6 +1,7 @@
 import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
 
 import Basic from './examples/Basic';
+import RTL from './examples/RTL';
 
 
 # Canvas Kit Loading Animation
@@ -22,6 +23,10 @@ yarn add @workday/canvas-kit-react
 
 <ExampleCodeBlock code={Basic} />
 
+### Right-to-Left (RTL)
+
+<ExampleCodeBlock code={RTL} />
+
 ## Props
 
 Loading Animation does not have any documented props. Undocumented props are spread to its outermost

package/dist/mdx/react/loading-animation/examples/RTL.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {LoadingAnimation} from '@workday/canvas-kit-react/loading-animation';
+import {CanvasProvider, ContentDirection} from '@workday/canvas-kit-react/common';
+
+export default () => {
+  const theme = {
+    canvas: {
+      direction: ContentDirection.RTL,
+    },
+  };
+  return (
+    <CanvasProvider theme={theme}>
+      <LoadingAnimation />
+    </CanvasProvider>
+  );
+};

package/dist/mdx/react/pagination/PropTables.splitprops.tsx

@@ -0,0 +1,47 @@
+import {
+  PaginationModel,
+  PaginationState,
+  PaginationEvents,
+  UsePaginationModelConfig,
+} from '@workday/canvas-kit-react/pagination';
+
+// <ArgsTable of={Pagination} /> generates a very large props table given that
+// PaginationProps includes FlexProps. Use this dummy component instead to
+// limit the props shown.
+export const PaginationHoistedComponent = (_: {model: PaginationModel}) => <div />;
+
+// <ArgsTable of={Pagination.PageButton} /> generates a props table with
+// IconButton props. Use this dummy component instead to limit the props shown.
+export const PageButtonComponent = (_: {pageNumber: number}) => <div />;
+
+// <ArgsTable of={Pagination.PageListComponent} /> generates a very large props
+// table given that PageListProps includes FlexProps. Use this dummy component
+// instead to limit the props shown.
+export const PageListComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+}) => <div />;
+
+// <ArgsTable of={Pagination.AdditionalDetails} /> generates a very large props
+// table given that AdditionalDetailsProps includes FlexProps. Use this dummy
+// component instead to limit the props shown.
+export const AdditionalDetailsComponent = (_: {
+  /**
+   * Accepts child elements or a render prop.
+   */
+  children: (model: PaginationModel) => React.ReactNode | React.ReactNode;
+  /**
+   * @default true
+   */
+  shouldAnnounceToScreenReader?: boolean;
+  /**
+   * @default false
+   */
+  shouldHideDetails?: boolean;
+}) => <div />;
+
+export const PaginationModelConfigComponent = (_: UsePaginationModelConfig) => <div />;
+export const PaginationStateComponent = (_: PaginationState) => <div />;
+export const PaginationEventsComponent = (_: PaginationEvents) => <div />;

package/dist/mdx/react/pagination/examples/{StepControls.tsx → Basic.tsx}

@@ -30,7 +30,7 @@ export default () => {
         </Pagination.PageList>
         <Pagination.StepToNextButton aria-label="Next" />
       </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
+      <Pagination.AdditionalDetails>
         {({state}) =>
           `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
             state.currentPage,

package/dist/mdx/react/pagination/examples/GoToForm.tsx

@@ -33,7 +33,7 @@ export default () => {
         <Pagination.JumpToLastButton aria-label="Last" />
         <Pagination.GoToForm>
           <Pagination.GoToTextInput aria-label="Go to page number" />
-          <Pagination.GoToLabel>{({state}) => `of ${totalCount} results`}</Pagination.GoToLabel>
+          <Pagination.GoToLabel>{({state}) => `of ${state.lastPage} pages`}</Pagination.GoToLabel>
         </Pagination.GoToForm>
       </Pagination.Controls>
       <Pagination.AdditionalDetails shouldHideDetails>