@okta/odyssey-react-mui 1.43.0 → 1.45.0

package/dist/assets/PageTemplate _labs_.stories-BVKInLfu.js

@@ -0,0 +1,306 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{r as i}from"./index-NdkWRN8K.js";import{d as S,c as O}from"./personData-CZJz4n06.js";import{M as m,a as c}from"./PageTemplate-DOXk_uAG.js";import{g as K,a as d,f as h,d as k}from"./Typography-CiNRLenM.js";import{u as Y}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{M as J}from"./Dialog-BIM-1Zvj.js";import{M as o}from"./Button-BOzIr8Jh.js";import{M as p}from"./Layout-Bojn6-Uj.js";import{M as P}from"./DataTable-CnCWIOTw.js";import{M as Q}from"./MenuButton-OjJFnmOD.js";import{M as D}from"./MenuItem-CuP47MJ-.js";import{M as N}from"./Drawer-Dg44iOBm.js";import{M as X}from"./Form-CBnvE26F.js";import{M as j}from"./TextField-CZ0hstP2.js";import{M as n}from"./Box-BXOPvc0Q.js";import{M as Z}from"./Checkbox-BTj1hXUa.js";const ee=e.jsxs(e.Fragment,{children:[e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."}),e.jsx("div",{children:"A critical capability that Okta Privileged Access offers is the separation of administrative roles and responsibilities. Management of users and groups, resources, and security are separated, with each administrative role designed to perform a specific function. For example, the management of security policies to access resources is separated and decoupled from the administration of the resources. To meet this requirement, the team that sets the policy is separated from the team that administers the resource. Likewise, the administrator managing users and groups can only perform user and group management tasks and isn't involved in administering resources or creating security policies."}),e.jsx("div",{children:"The level of access within a Okta Privileged Access team depends on the role that you're assigned and the permissions granted to that role. The table below discusses the types of roles, and each has a unique set of permissions and restrictions.To start using Okta Privileged Access, you need to add the Okta Privileged Access OIN application to your Okta org. You can then sync your users and groups from the Okta Universal Directory by configuring SCIM. End users must install the Okta Privileged Access client in their local machine, enroll the client, and then access their dashboard using the link provided by their team administrator."})]}),te=e.jsx("div",{children:"Okta Privileged Access is a Privileged Access Management (PAM) solution designed to help customers mitigate the risk of unauthorized access to resources, a critical area of security and risk management in any organization. Okta Privileged Access builds on the current server access control capabilities provided with Okta Advanced Server Access and delivers a unified approach to managing access to all your privileged accounts. It securely connects people, machines, and applications to privileged resources such as servers, containers, and enterprise apps."}),ae={component:m,argTypes:{title:{control:"text",description:"The title to be situated in the `PageTemplate` header",table:{type:{summary:"string"}}},description:{control:"text",description:"A supplementary description to be situated in the `PageTemplate` header",table:{type:{summary:"string"}}},documentationLink:{control:"text",description:"The destination for a documentation `Link` to be situated in the `PageTemplate` header",table:{type:{summary:"string"}}},documentationText:{control:"text",description:"The text for a documentation `Link` to be situated in the `PageTemplate` header",table:{type:{summary:"string"}}},drawer:{description:"An optional `Drawer` object. Can be of variant 'temporary' or 'persistent'.",table:{type:{summary:"ReactElement<typeof Drawer>"}}},primaryCallToActionComponent:{description:"An optional `Button` object to be situated in the `PageTemplate` header. Should almost always be of variant `primary`.",table:{type:{summary:"ReactElement<typeof Button>"}}},secondaryCallToActionComponent:{description:"An optional `Button` object to be situated in the `PageTemplate` header, alongside the `callToActionPrimaryComponent`.",table:{type:{summary:"ReactElement<typeof Button>"}}},tertiaryCallToActionComponent:{description:"An optional `Button` object to be situated in the `PageTemplate` header, alongside the other two `callToAction` components.",table:{type:{summary:"ReactElement<typeof Button>"}}},children:{description:"The content of the `PageTemplate`. May be a `string` or any other `ReactNode` or array of `ReactNode`s. Will often be `Grid` objects.",table:{type:{summary:"ReactNode"}}},isFullWidth:{control:"boolean",description:"When set to `true`, the `PageTemplate` expands past its max width of 1440px and spans the entire available screen width.",table:{type:{summary:"boolean"},defaultValue:{summary:"false"}}}}},x={args:{title:"Table title",description:"Optional brief description about the page",documentationLink:"https://www.okta.com",documentationText:"Documentation",isFullWidth:!1},render:function(t){const[l]=i.useState(S.slice(0,10)),[s,a]=i.useState(!1),[r,u]=i.useState(!1),g=i.useCallback(()=>l,[l]),_=i.useCallback(()=>{a(!0)},[]),T=i.useCallback(()=>{a(!1)},[]),$=i.useCallback(()=>{u(!0)},[]),w=i.useCallback(()=>{u(!1)},[]);return e.jsxs(m,{description:t.description,documentationLink:t.documentationLink,documentationText:t.documentationText,drawer:e.jsx(N,{isOpen:s,onClose:T,primaryCallToActionComponent:e.jsx(o,{label:"Primary",onClick:T,variant:"primary"}),showDividers:!0,title:"Drawer title",variant:"temporary",children:ee}),isFullWidth:t.isFullWidth,primaryCallToActionComponent:e.jsx(o,{label:s?"Close overlay drawer":"Open overlay drawer",onClick:s?T:_,variant:"primary"}),secondaryCallToActionComponent:e.jsx(o,{label:r?"Close dialog":"Open dialog",onClick:r?w:$,variant:"secondary"}),tertiaryCallToActionComponent:e.jsx(Q,{buttonLabel:"More actions",children:[e.jsx(D,{children:"View details"},"1"),e.jsx(D,{children:"Edit configuration"},"2"),e.jsx(D,{children:"Launch"},"3")]}),title:t.title,children:[e.jsx(J,{children:"Consistently named a Leader by major analyst firms. Trusted by 15,000+ customers to secure digital interactions and accelerate innovation.",isOpen:r,onClose:w,primaryCallToActionComponent:e.jsx(o,{label:"Button label",onClick:w,variant:"primary"}),secondaryCallToActionComponent:e.jsx(o,{label:"Cancel",onClick:w,variant:"secondary"}),title:"Dialog title"}),e.jsxs(p,{regions:[3,1],children:[e.jsx(c,{children:e.jsx(P,{columns:O,getData:g,hasFilters:!0,hasSearch:!0,totalRows:10})}),e.jsxs(c,{children:[e.jsx(K,{children:"Some supporting content could go here"}),e.jsx(d,{children:"Lorem ipsum odor amet, consectetuer adipiscing elit. Inceptos turpis mattis; tempor proin per natoque. Ex eu dictum varius tristique himenaeos aenean sem consectetur urna. Curabitur ultricies aptent ac tempus natoque tellus. Rutrum facilisi facilisi ligula aenean sociosqu nec velit parturient id. Egestas viverra tempus non, turpis ad ex penatibus. Scelerisque maximus etiam arcu laoreet nam vitae platea. Non fermentum potenti cursus, varius augue varius. Cubilia imperdiet aptent viverra mus urna. Et netus at ad lorem; hac eu."})]})]})]})}},y={args:{title:"Table title",description:"Optional brief description about the page",documentationLink:"https://www.okta.com",documentationText:"Documentation",isFullWidth:!1},render:function(t){const[l]=i.useState(S.slice(0,10)),[s,a]=i.useState(!1),r=i.useCallback(()=>l,[l]),u=i.useCallback(()=>{a(!0)},[]),g=i.useCallback(()=>{a(!1)},[]);return e.jsx(m,{description:t.description,documentationLink:t.documentationLink,documentationText:t.documentationText,drawer:e.jsx(N,{isOpen:s,onClose:g,primaryCallToActionComponent:e.jsx(o,{label:"Primary",onClick:g,variant:"primary"}),showDividers:!0,title:"Drawer title",variant:"persistent",children:te}),isFullWidth:t.isFullWidth,primaryCallToActionComponent:e.jsx(o,{label:s?"Close embedded drawer":"Open embedded drawer",onClick:s?g:u,variant:"primary"}),title:t.title,children:e.jsx(p,{regions:[1],children:e.jsx(c,{children:e.jsx(P,{columns:O,getData:r,hasFilters:!0,hasSearch:!0,totalRows:10})})})})}},f={args:{title:"People",description:"Optional brief description about the page",documentationLink:"https://www.okta.com",documentationText:"Help",isFullWidth:!1},render:function(t){return e.jsx(m,{description:t.description,documentationLink:t.documentationLink,documentationText:t.documentationText,isFullWidth:t.isFullWidth,primaryCallToActionComponent:e.jsx(o,{label:"Reset passwords",variant:"primary"}),title:t.title,children:e.jsx(p,{regions:[1],children:e.jsx(c,{children:e.jsxs(X,{formActions:e.jsxs(e.Fragment,{children:[e.jsx(o,{label:"Reset",variant:"secondary"}),e.jsx(o,{label:"Submit",type:"submit",variant:"primary"})]}),name:"Add Person",title:"Add Person",children:[e.jsx(j,{label:"First name"}),e.jsx(j,{label:"Last name"}),e.jsx(j,{label:"Email"})]})})})})}},b={args:{title:"Account",documentationLink:"https://www.okta.com",documentationText:"Help",isFullWidth:!1},render:function(t){const l=[{field:"Company name",value:"ACME Corporation"},{field:"Telephone number",value:"012-345-6789"},{field:"Address 1",value:void 0},{field:"Address 2",value:void 0}],s=[{field:"Technical contact",value:"Add-Min O'Cloudy (admin@okta.com)"},{field:"Support phone",value:"012-345-6789"},{field:"Help link",value:void 0},{field:"End User Help Form",value:void 0}],a=Y();return e.jsxs(m,{description:t.description,documentationLink:t.documentationLink,documentationText:t.documentationText,isFullWidth:t.isFullWidth,title:t.title,children:[e.jsxs(p,{regions:[2,1],children:[e.jsxs(c,{children:[e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[e.jsx(h,{children:"Organization Contact"}),e.jsx(o,{label:"Edit",variant:"floating"})]}),e.jsx(n,{sx:{display:"flex",flexDirection:"column",rowGap:a.Spacing4,marginTop:a.Spacing4},children:l.map((r,u)=>e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between"},children:[e.jsx(d,{children:r.field}),e.jsx(d,{children:r.value})]},u))})]}),e.jsxs(c,{children:[e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[e.jsx(h,{children:"Billing information"}),e.jsx(o,{label:"Edit",variant:"floating"})]}),e.jsxs(n,{sx:{display:"flex",flexDirection:"column",rowGap:a.Spacing2,marginTop:a.Spacing4},children:[e.jsx(k,{children:"The billing contact can be contacted by Okta for the purposes of billing inquiries."}),e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between"},children:[e.jsx(d,{children:"Billing contact"}),e.jsx(d,{children:"Add-Min O'Cloudy (admin@okta.com)"})]})]})]})]}),e.jsxs(p,{regions:[1,1,1],children:[e.jsxs(c,{children:[e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[e.jsx(h,{children:"Give Access to Okta Support"}),e.jsx(o,{label:"Edit",variant:"floating"})]}),e.jsxs(n,{sx:{display:"flex",flexDirection:"column",rowGap:a.Spacing2,marginTop:a.Spacing4},children:[e.jsx(k,{children:"For troubleshooting purposes, you can let Okta Support login to your account as an administrator."}),e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between"},children:[e.jsx(d,{children:"Okta Support access"}),e.jsx(d,{children:"Disabled"})]})]})]}),e.jsxs(c,{children:[e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[e.jsx(h,{children:"End User Support"}),e.jsx(o,{label:"Edit",variant:"floating"})]}),e.jsxs(n,{sx:{display:"flex",flexDirection:"column",rowGap:a.Spacing2,marginTop:a.Spacing4},children:[e.jsx(k,{children:"For troubleshooting purposes, you can let Okta Support login to your account as an administrator."}),s.map((r,u)=>e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between"},children:[e.jsx(d,{children:r.field}),e.jsx(d,{children:r.value})]},u))]})]}),e.jsxs(c,{children:[e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-end"},children:[e.jsx(h,{children:"Third-Party Admins"}),e.jsx(o,{label:"Edit",variant:"floating"})]}),e.jsx(n,{sx:{display:"flex",flexDirection:"column",rowGap:a.Spacing2,marginTop:a.Spacing4},children:e.jsxs(n,{sx:{display:"flex",justifyContent:"space-between",columnGap:a.Spacing8},children:[e.jsx(d,{children:"Manage Third-Party Admins"}),e.jsx(Z,{label:"This org contains third-party admins that need to be fully excluded from all Okta communications, including admin-related system notifications. Once enabled, you can exclude individual admins from communications by editing their admin record."})]})})]})]})]})}},C={args:{title:"Full-width Table",documentationLink:"https://www.okta.com",documentationText:"Help",isFullWidth:!0},render:function(t){const[l]=i.useState(S.slice(0,10)),s=i.useCallback(()=>l,[l]);return e.jsx(m,{documentationLink:t.documentationLink,documentationText:t.documentationText,isFullWidth:t.isFullWidth,title:t.title,children:e.jsx(p,{regions:[1],children:e.jsx(c,{children:e.jsx(P,{columns:O,getData:s,hasFilters:!0,hasSearch:!0,totalRows:10})})})})}};var A,B,F;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  args: {
+    title: "Table title",
+    description: "Optional brief description about the page",
+    documentationLink: "https://www.okta.com",
+    documentationText: "Documentation",
+    isFullWidth: false
+  },
+  render: function C(args) {
+    const [data] = useState<Person[]>(personData.slice(0, 10));
+    const [isOverlayDrawerVisible, setIsOverlayVisible] = useState(false);
+    const [isDialogVisible, setIsDialogVisible] = useState(false);
+    const getData = useCallback(() => {
+      return data;
+    }, [data]);
+    const onOpenOverlayDrawer = useCallback(() => {
+      setIsOverlayVisible(true);
+    }, []);
+    const onCloseOverlayDrawer = useCallback(() => {
+      setIsOverlayVisible(false);
+    }, []);
+    const onOpenDialog = useCallback(() => {
+      setIsDialogVisible(true);
+    }, []);
+    const onCloseDialog = useCallback(() => {
+      setIsDialogVisible(false);
+    }, []);
+    return <PageTemplate description={args.description} documentationLink={args.documentationLink} documentationText={args.documentationText} drawer={<Drawer isOpen={isOverlayDrawerVisible} onClose={onCloseOverlayDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseOverlayDrawer} variant="primary" />} showDividers title="Drawer title" variant="temporary">
+            {drawerLongText}
+          </Drawer>} isFullWidth={args.isFullWidth} primaryCallToActionComponent={<Button label={isOverlayDrawerVisible ? "Close overlay drawer" : "Open overlay drawer"} onClick={isOverlayDrawerVisible ? onCloseOverlayDrawer : onOpenOverlayDrawer} variant="primary" />} secondaryCallToActionComponent={<Button label={isDialogVisible ? "Close dialog" : "Open dialog"} onClick={isDialogVisible ? onCloseDialog : onOpenDialog} variant="secondary" />} tertiaryCallToActionComponent={<MenuButton buttonLabel="More actions" children={[<MenuItem key="1">View details</MenuItem>, <MenuItem key="2">Edit configuration</MenuItem>, <MenuItem key="3">Launch</MenuItem>]} />} title={args.title}>
+        <Dialog children="Consistently named a Leader by major analyst firms. Trusted by 15,000+ customers to secure digital interactions and accelerate innovation." isOpen={isDialogVisible} onClose={onCloseDialog} primaryCallToActionComponent={<Button label="Button label" onClick={onCloseDialog} variant="primary" />} secondaryCallToActionComponent={<Button label="Cancel" onClick={onCloseDialog} variant="secondary" />} title="Dialog title" />
+        <Layout regions={[3, 1]}>
+          <Surface>
+            <DataTable columns={personColumns} getData={getData} hasFilters hasSearch totalRows={10} />
+          </Surface>
+          <Surface>
+            <Heading3>Some supporting content could go here</Heading3>
+            <Paragraph>
+              Lorem ipsum odor amet, consectetuer adipiscing elit. Inceptos
+              turpis mattis; tempor proin per natoque. Ex eu dictum varius
+              tristique himenaeos aenean sem consectetur urna. Curabitur
+              ultricies aptent ac tempus natoque tellus. Rutrum facilisi
+              facilisi ligula aenean sociosqu nec velit parturient id. Egestas
+              viverra tempus non, turpis ad ex penatibus. Scelerisque maximus
+              etiam arcu laoreet nam vitae platea. Non fermentum potenti cursus,
+              varius augue varius. Cubilia imperdiet aptent viverra mus urna. Et
+              netus at ad lorem; hac eu.
+            </Paragraph>
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(F=(B=x.parameters)==null?void 0:B.docs)==null?void 0:F.source}}};var L,M,E;y.parameters={...y.parameters,docs:{...(L=y.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  args: {
+    title: "Table title",
+    description: "Optional brief description about the page",
+    documentationLink: "https://www.okta.com",
+    documentationText: "Documentation",
+    isFullWidth: false
+  },
+  render: function C(args) {
+    const [data] = useState<Person[]>(personData.slice(0, 10));
+    const [isEmbeddedDrawerVisible, setIsEmbeddedVisible] = useState(false);
+    const getData = useCallback(() => {
+      return data;
+    }, [data]);
+    const onOpenEmbeddedDrawer = useCallback(() => {
+      setIsEmbeddedVisible(true);
+    }, []);
+    const onCloseEmbeddedDrawer = useCallback(() => {
+      setIsEmbeddedVisible(false);
+    }, []);
+    return <PageTemplate description={args.description} documentationLink={args.documentationLink} documentationText={args.documentationText} drawer={<Drawer isOpen={isEmbeddedDrawerVisible} onClose={onCloseEmbeddedDrawer} primaryCallToActionComponent={<Button label="Primary" onClick={onCloseEmbeddedDrawer} variant="primary" />} showDividers title="Drawer title" variant="persistent">
+            {drawerShortText}
+          </Drawer>} isFullWidth={args.isFullWidth} primaryCallToActionComponent={<Button label={isEmbeddedDrawerVisible ? "Close embedded drawer" : "Open embedded drawer"} onClick={isEmbeddedDrawerVisible ? onCloseEmbeddedDrawer : onOpenEmbeddedDrawer} variant="primary" />} title={args.title}>
+        <Layout regions={[1]}>
+          <Surface>
+            <DataTable columns={personColumns} getData={getData} hasFilters hasSearch totalRows={10} />
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(E=(M=y.parameters)==null?void 0:M.docs)==null?void 0:E.source}}};var I,W,V;f.parameters={...f.parameters,docs:{...(I=f.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  args: {
+    title: "People",
+    description: "Optional brief description about the page",
+    documentationLink: "https://www.okta.com",
+    documentationText: "Help",
+    isFullWidth: false
+  },
+  render: function C(args) {
+    return <PageTemplate description={args.description} documentationLink={args.documentationLink} documentationText={args.documentationText} isFullWidth={args.isFullWidth} primaryCallToActionComponent={<Button label="Reset passwords" variant="primary" />} title={args.title}>
+        <Layout regions={[1]}>
+          <Surface>
+            <OdysseyForm formActions={<>
+                  <Button label="Reset" variant="secondary" />
+                  <Button label="Submit" type="submit" variant="primary" />
+                </>} name="Add Person" title="Add Person">
+              <TextField label="First name" />
+              <TextField label="Last name" />
+              <TextField label="Email" />
+            </OdysseyForm>
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(V=(W=f.parameters)==null?void 0:W.docs)==null?void 0:V.source}}};var z,H,R;b.parameters={...b.parameters,docs:{...(z=b.parameters)==null?void 0:z.docs,source:{originalSource:`{
+  args: {
+    title: "Account",
+    documentationLink: "https://www.okta.com",
+    documentationText: "Help",
+    isFullWidth: false
+  },
+  render: function C(args) {
+    const organizationData = [{
+      field: "Company name",
+      value: "ACME Corporation"
+    }, {
+      field: "Telephone number",
+      value: "012-345-6789"
+    }, {
+      field: "Address 1",
+      value: undefined
+    }, {
+      field: "Address 2",
+      value: undefined
+    }];
+    const endUserData = [{
+      field: "Technical contact",
+      value: "Add-Min O'Cloudy (admin@okta.com)"
+    }, {
+      field: "Support phone",
+      value: "012-345-6789"
+    }, {
+      field: "Help link",
+      value: undefined
+    }, {
+      field: "End User Help Form",
+      value: undefined
+    }];
+    const odysseyDesignTokens = useOdysseyDesignTokens();
+    return <PageTemplate description={args.description} documentationLink={args.documentationLink} documentationText={args.documentationText} isFullWidth={args.isFullWidth} title={args.title}>
+        <Layout regions={[2, 1]}>
+          <Surface>
+            <Box sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end"
+          }}>
+              <Heading5>Organization Contact</Heading5>
+              <Button label="Edit" variant="floating" />
+            </Box>
+            <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: odysseyDesignTokens.Spacing4,
+            marginTop: odysseyDesignTokens.Spacing4
+          }}>
+              {organizationData.map((data, index) => {
+              return <Box key={index} sx={{
+                display: "flex",
+                justifyContent: "space-between"
+              }}>
+                    <Paragraph>{data.field}</Paragraph>
+                    <Paragraph>{data.value}</Paragraph>
+                  </Box>;
+            })}
+            </Box>
+          </Surface>
+          <Surface>
+            <Box sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end"
+          }}>
+              <Heading5>Billing information</Heading5>
+              <Button label="Edit" variant="floating" />
+            </Box>
+            <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: odysseyDesignTokens.Spacing2,
+            marginTop: odysseyDesignTokens.Spacing4
+          }}>
+              <Support>
+                The billing contact can be contacted by Okta for the purposes of
+                billing inquiries.
+              </Support>
+              <Box sx={{
+              display: "flex",
+              justifyContent: "space-between"
+            }}>
+                <Paragraph>Billing contact</Paragraph>
+                <Paragraph>Add-Min O'Cloudy (admin@okta.com)</Paragraph>
+              </Box>
+            </Box>
+          </Surface>
+        </Layout>
+        <Layout regions={[1, 1, 1]}>
+          <Surface>
+            <Box sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end"
+          }}>
+              <Heading5>Give Access to Okta Support</Heading5>
+              <Button label="Edit" variant="floating" />
+            </Box>
+            <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: odysseyDesignTokens.Spacing2,
+            marginTop: odysseyDesignTokens.Spacing4
+          }}>
+              <Support>
+                For troubleshooting purposes, you can let Okta Support login to
+                your account as an administrator.
+              </Support>
+              <Box sx={{
+              display: "flex",
+              justifyContent: "space-between"
+            }}>
+                <Paragraph>Okta Support access</Paragraph>
+                <Paragraph>Disabled</Paragraph>
+              </Box>
+            </Box>
+          </Surface>
+          <Surface>
+            <Box sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end"
+          }}>
+              <Heading5>End User Support</Heading5>
+              <Button label="Edit" variant="floating" />
+            </Box>
+            <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: odysseyDesignTokens.Spacing2,
+            marginTop: odysseyDesignTokens.Spacing4
+          }}>
+              <Support>
+                For troubleshooting purposes, you can let Okta Support login to
+                your account as an administrator.
+              </Support>
+              {endUserData.map((data, index) => {
+              return <Box key={index} sx={{
+                display: "flex",
+                justifyContent: "space-between"
+              }}>
+                    <Paragraph>{data.field}</Paragraph>
+                    <Paragraph>{data.value}</Paragraph>
+                  </Box>;
+            })}
+            </Box>
+          </Surface>
+          <Surface>
+            <Box sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "flex-end"
+          }}>
+              <Heading5>Third-Party Admins</Heading5>
+              <Button label="Edit" variant="floating" />
+            </Box>
+            <Box sx={{
+            display: "flex",
+            flexDirection: "column",
+            rowGap: odysseyDesignTokens.Spacing2,
+            marginTop: odysseyDesignTokens.Spacing4
+          }}>
+              <Box sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              columnGap: odysseyDesignTokens.Spacing8
+            }}>
+                <Paragraph>Manage Third-Party Admins</Paragraph>
+                <Checkbox label="This org contains third-party admins that need to be fully excluded from all Okta communications, including admin-related system notifications. Once enabled, you can exclude individual admins from communications by editing their admin record." />
+              </Box>
+            </Box>
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(R=(H=b.parameters)==null?void 0:H.docs)==null?void 0:R.source}}};var G,q,U;C.parameters={...C.parameters,docs:{...(G=C.parameters)==null?void 0:G.docs,source:{originalSource:`{
+  args: {
+    title: "Full-width Table",
+    documentationLink: "https://www.okta.com",
+    documentationText: "Help",
+    isFullWidth: true
+  },
+  render: function C(args) {
+    const [data] = useState<Person[]>(personData.slice(0, 10));
+    const getData = useCallback(() => {
+      return data;
+    }, [data]);
+    return <PageTemplate documentationLink={args.documentationLink} documentationText={args.documentationText} isFullWidth={args.isFullWidth} title={args.title}>
+        <Layout regions={[1]}>
+          <Surface>
+            <DataTable columns={personColumns} getData={getData} hasFilters hasSearch totalRows={10} />
+          </Surface>
+        </Layout>
+      </PageTemplate>;
+  }
+}`,...(U=(q=C.parameters)==null?void 0:q.docs)==null?void 0:U.source}}};const ne=["KitchenSink","EmbeddedDrawer","Form","Dashboard","FullWidth"],ve=Object.freeze(Object.defineProperty({__proto__:null,Dashboard:b,EmbeddedDrawer:y,Form:f,FullWidth:C,KitchenSink:x,__namedExportsOrder:ne,default:ae},Symbol.toStringTag,{value:"Module"}));export{ve as P};

package/dist/assets/PageTemplate-DOXk_uAG.js

@@ -0,0 +1,21 @@
+import{n as t}from"./createTheme-BmPXDA4p.js";import{r as i}from"./index-NdkWRN8K.js";import{u as g}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{M as j}from"./OdysseyThemeProvider-aR5shtx6.js";import{u as M}from"./useContrastMode-BthoHtLy.js";import{j as a}from"./jsx-runtime-CnH95YSl.js";import{P}from"./Paper-DbAuDGNI.js";import{b as D,a as F}from"./Typography-CiNRLenM.js";import{u as b}from"./useMountLifecycleEffect-CjsUCFhB.js";import{L as w}from"./Link-ClKgpBXG.js";import{M as C}from"./Documentation-DM1hawvn.js";const H=t(P,{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="contrastMode"})(({contrastMode:e,odysseyDesignTokens:s})=>({borderRadius:s.Spacing4,padding:s.Spacing5,border:e==="lowContrast"?`1px solid ${s.HueNeutral100}`:"none",boxShadow:"none"})),v=({children:e})=>{const s=g(),{contrastMode:n}=M();return a.jsx(H,{contrastMode:n,odysseyDesignTokens:s,children:a.jsx(j,{children:e})})},z=i.memo(v);z.displayName="Surface";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const L="data-unified-ui-shell",R=()=>{const[e,s]=i.useState(!1);return i.useEffect(()=>{s(!!document.querySelector(`[${L}]`))},[]),e},E=({children:e,href:s,icon:n,target:o})=>a.jsxs(w,{href:s,target:o,children:[n&&a.jsx("span",{className:"Link-icon",children:n}),e]}),f=i.memo(E);f.displayName="DocumentationLink";/*!
+ * Copyright (c) 2024-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const N=t("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"&&e!=="hasUiShell"&&e!=="isFullWidth"})(({hasUiShell:e,isFullWidth:s,odysseyDesignTokens:n})=>({maxWidth:s?"100%":`calc(1440px + ${n.Spacing6} + ${n.Spacing6})`,marginInline:s&&!e?n.Spacing6:"auto",padding:e?0:n.Spacing6})),U=t("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({display:"flex",alignItems:"flex-start",justifyContent:"space-between",gap:e.Spacing4})),$=t("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({maxWidth:e.TypographyLineLengthMax,".MuiTypography-root:last-child":{marginBlockEnd:"0"}})),B=t("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({alignItems:"flex-end",display:"flex",flexDirection:"column",gap:e.Spacing4,minHeight:e.Spacing7,justifyContent:"center",whiteSpace:"nowrap"})),I=t("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({display:"flex",gap:e.Spacing2})),W=t("div",{shouldForwardProp:e=>!["drawerVariant","isDrawerOpen","isFirstRender","odysseyDesignTokens"].includes(e)})(({drawerVariant:e,isDrawerOpen:s,isFirstRender:n,odysseyDesignTokens:o})=>({"@keyframes animate-drawer-open":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 0"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 360px"}},"@keyframes animate-drawer-close":{"0%":{gridTemplateColumns:"minmax(0, 1fr) 360px"},"100%":{gridTemplateColumns:"minmax(0, 1fr) 0"}},display:"grid",gridGap:e==="persistent"&&!s?0:o.Spacing4,gap:e==="persistent"&&!s?0:o.Spacing4,marginBlock:o.Spacing4,gridTemplateColumns:e==="persistent"?s?"minmax(0, 1fr) 360px":"minmax(0, 1fr) 0":"minmax(0, 1fr)",animation:e==="persistent"&&(!n||s)?`animate-drawer-${s?"open":"close"} 225ms cubic-bezier(0, 0, 0.2, 1)`:void 0})),O=({children:e,description:s,documentationLink:n,documentationText:o,drawer:d,isFullWidth:h=!1,primaryCallToActionComponent:m,secondaryCallToActionComponent:l,tertiaryCallToActionComponent:c,title:p})=>{const r=g(),{isOpen:x,variant:y}=(d==null?void 0:d.props)??{},S=R(),u=i.useRef(!0),T=u.current,k=i.useCallback(()=>{u.current=!1},[]);return b({onMount:k}),a.jsxs(N,{hasUiShell:S,isFullWidth:h,odysseyDesignTokens:r,children:[a.jsxs(U,{odysseyDesignTokens:r,children:[a.jsxs($,{odysseyDesignTokens:r,children:[p&&a.jsx(D,{children:p}),s&&a.jsx(F,{children:s})]}),a.jsxs(B,{odysseyDesignTokens:r,children:[n&&a.jsx(f,{href:n,icon:a.jsx(C,{}),target:"_blank",children:o}),(m||l||c)&&a.jsxs(I,{odysseyDesignTokens:r,children:[c,l,m]})]})]}),a.jsxs(W,{drawerVariant:y,isDrawerOpen:x,isFirstRender:T,odysseyDesignTokens:r,children:[e,d]})]})},q=i.memo(O);q.displayName="PageTemplate";export{q as M,z as a,L as u};

package/dist/assets/PaginatedTable _labs_.stories-Bet6WnQV.js

@@ -0,0 +1,65 @@
+import{j as i}from"./jsx-runtime-CnH95YSl.js";import{f as A}from"./index-BJMTVygn.js";import{r as e}from"./index-NdkWRN8K.js";import{u as pe,M as fe}from"./index.esm-D7MwfoQM.js";import{M as j}from"./Typography-CiNRLenM.js";import{u as Ne}from"./useTranslation-vEf1lqoc.js";import{T as z}from"./Trans-DZ9nii1x.js";import{M as ge}from"./Button-BOzIr8Jh.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./createTheme-BmPXDA4p.js";import"./createSvgIcon-DiC7XVU3.js";import"./SvgIcon-BQAg6Jm7.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./createChainedFunction-BO_9K8Jh.js";import"./debounce-Be36O1Ab.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./formLabelClasses-xMgYguuN.js";import"./ListContext-C02XM7tn.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./buttonBaseClasses-CSPKg76d.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./useId-cMcvCE23.js";import"./useControlled-NQulfz4l.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./utils-gq6yExow.js";import"./useTheme-C05bJKih.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./Tooltip-B4GIR2eB.js";import"./index-CpbQl8EB.js";import"./tooltipClasses-C74HjonW.js";import"./Grow-CIie3qhp.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./Popper-CwLH-7YW.js";import"./popper-CMBiYTiD.js";import"./Paper-DbAuDGNI.js";import"./Box-C2ekHaOu.js";import"./CircularProgress-DNk4kmx6.js";import"./DialogContent-C_FnZ5ZS.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./DialogTitle-CLDQZ0bg.js";import"./Typography-D7-qxuiy.js";import"./typographyClasses-D8vr2n3l.js";import"./Menu-CGJO1mMf.js";import"./MenuList-BboivbXC.js";import"./List-W5kRT_jR.js";import"./colorManipulator-O7SU8zMv.js";import"./IconButton-CK9Do7vj.js";import"./Radio-Bi1_KmSD.js";import"./SwitchBase-Bja5dn-O.js";import"./radioClasses-f3ayyf7y.js";import"./Checkbox-luq82K1t.js";import"./checkboxClasses-Dtdq1kQG.js";import"./useMobilePicker-CfUl5sFz.js";import"./Select-DVJCNQIV.js";import"./ArrowDropDown-bSngWMh1.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./InputBase--xDu7aWm.js";import"./GlobalStyles-BxDN_5FT.js";import"./FormHelperText-ZkUAjajs.js";import"./useThemeProps-BG38P4ul.js";import"./InputAdornment-CFgP75Dd.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./Button-BqwcAVQ-.js";import"./buttonClasses-DtIJBSf4.js";import"./Chip-BOK8DR8m.js";import"./chipClasses-BMWKl3Eu.js";import"./tableRowClasses-inqOIkjd.js";import"./MenuItem-DjSqFwdt.js";import"./menuItemClasses-DFm3-Sf1.js";import"./Collapse-P1H1b4lO.js";import"./AlertTitle-DlG4YQWR.js";import"./useSlot-F4Qz2Wzp.js";import"./Close-DA_Sph0R.js";import"./alertTitleClasses-CSPeaunQ.js";import"./Skeleton-BJLiCr2o.js";import"./Divider-CsWa3KCo.js";import"./Autocomplete-MfScEzbR.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./ListSubheader-DXKE8lW0.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./visuallyHidden-Dan1xhjv.js";import"./DateTimePicker-CnXcHc5u.js";import"./Tabs-ChAj4m0g.js";import"./DatePicker-DIRg7n4d.js";import"./context-D_qJ2zXV.js";import"./BaseButton-B5c4cgt8.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-3088PjcT.js";/*!
+ * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const ye=({columns:t=[],data:r=[],fetchMoreData:o,getRowId:d,hasError:p,hasRowSelection:f,initialState:n,isFetching:w,onGlobalFilterChange:N,onPaginationChange:g,onRowSelectionChange:y,rowsPerPage:ee=10,state:C,ToolbarButtons:E})=>{const{t:L}=Ne(),v=e.useRef(null),[J,te]=e.useState([]),[c,ae]=e.useState();e.useEffect(()=>{c!==void 0&&(N==null||N(c))},[c,N]),e.useEffect(()=>{var s,m;try{(m=(s=v.current)==null?void 0:s.scrollToIndex)==null||m.call(s,0)}catch(u){console.error(u)}},[J,c]);const l=r.length??0,se=e.useCallback(()=>o?i.jsx(j,{children:i.jsx(z,{count:l,i18nKey:"table.fetchedrows.text",values:{totalRows:l}})}):i.jsx(j,{children:i.jsx(z,{count:l,i18nKey:"table.rows.text",values:{totalRows:l}})}),[o,l]),re=e.useCallback(({table:s})=>i.jsx(i.Fragment,{children:E&&i.jsx(E,{table:s})}),[E]),[b,oe]=e.useState({});e.useEffect(()=>{y==null||y(b)},[y,b]);const[a,ie]=e.useState((n==null?void 0:n.pagination)||{pageIndex:0,pageSize:ee}),K=e.useRef(r.length),ne=e.useCallback(s=>{r.length===K.current?ie(m=>s(m)):K.current=r.length},[r.length]);e.useEffect(()=>{const s=Math.floor(r.length/a.pageSize);!w&&a.pageIndex>s-1&&(o==null||o())},[r.length,o,w,a.pageIndex,a.pageSize]),e.useEffect(()=>{g==null||g({pageIndex:a.pageIndex,pageSize:a.pageSize})},[g,a.pageIndex,a.pageSize]);const me=e.useMemo(()=>({pagination:a,...n}),[n,a]),de=e.useMemo(()=>({pagination:{pageIndex:a.pageIndex,pageSize:a.pageSize},rowSelection:b,globalFilter:c,columnFilters:J,...C}),[a.pageIndex,a.pageSize,b,c,J,C]),ce=e.useMemo(()=>p?{children:L("table.error"),severity:"error"}:{},[p,L]),le=e.useMemo(()=>({rowsPerPageOptions:[],showFirstButton:!1,showLastButton:!1}),[]),O=e.useCallback(s=>{var m,u,M,V,B,h,P;return typeof((M=(u=(m=s.components)==null?void 0:m.MuiCheckbox)==null?void 0:u.styleOverrides)==null?void 0:M.root)=="function"?(P=(h=(B=(V=s.components)==null?void 0:V.MuiCheckbox)==null?void 0:B.styleOverrides)==null?void 0:h.root)==null?void 0:P.call(h,{ownerState:{},theme:s}):""},[]),ue=pe({columns:t,data:r,enableMultiRowSelection:f,enablePagination:!0,enableRowSelection:f,enableSorting:!1,getRowId:d,initialState:me,muiSelectAllCheckboxProps:{sx:O},muiSelectCheckboxProps:{sx:O},muiPaginationProps:le,muiToolbarAlertBannerProps:ce,onColumnFiltersChange:te,onGlobalFilterChange:ae,onPaginationChange:ne,onRowSelectionChange:oe,renderBottomToolbarCustomActions:se,renderTopToolbarCustomActions:re,rowVirtualizerInstanceRef:v,rowVirtualizerOptions:{overscan:4},state:de});return i.jsx(fe,{table:ue})},I=e.memo(ye);I.displayName="PaginatedTable";const pa={component:I,argTypes:{columns:{control:"object",type:{required:!0,name:"other",value:"MaterialReactTableProps<TData>"}},data:{control:"object",type:{required:!0,name:"other",value:"MaterialReactTableProps<TData>"}},getRowId:{},fetchMoreData:{},hasError:{control:"boolean"},hasRowSelection:{control:"boolean"},initialState:{control:"object"},isFetching:{control:"boolean"},onGlobalFilterChange:{},onPaginationChange:{},onRowSelectionChange:{},state:{control:"object"},ToolbarButtons:{},rowsPerPage:{table:{defaultValue:{summary:"10"}}}},args:{onPaginationChange:A(),onRowSelectionChange:A()}},T=[{accessorKey:"name.firstName",header:"First Name"},{accessorKey:"name.lastName",header:"Last Name"},{accessorKey:"address",Cell:({cell:t})=>t.getValue().concat(","),header:"Address"},{accessorKey:"city",header:"City"},{accessorKey:"state",header:"State"}],x=[{address:"261 Erdman Ford",city:"East Daphne",id:"234823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"234823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"234823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"234823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"234823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"334823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"334823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"334823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"334823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"334823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"434823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"434823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"434823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"434823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"434823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"534823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"534823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"534823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"534823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"534823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"634823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"634823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"634823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"634823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"634823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"734823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"734823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"734823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"734823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"734823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"834823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"834823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"834823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"834823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"834823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"},{address:"261 Erdman Ford",city:"East Daphne",id:"934823773",name:{firstName:"John",lastName:"Doe"},state:"Kentucky"},{address:"769 Dominic Grove",city:"Columbus",id:"934823774",name:{firstName:"Jane",lastName:"Doe"},state:"Ohio"},{address:"566 Brakus Inlet",city:"South Linda",id:"934823775",name:{firstName:"Joe",lastName:"Doe"},state:"West Virginia"},{address:"722 Emie Stream",city:"Lincoln",id:"934823776",name:{firstName:"Kevin",lastName:"Vandy"},state:"Nebraska"},{address:"32188 Larkin Turnpike",city:"Omaha",id:"934823777",name:{firstName:"Joshua",lastName:"Rolluffs"},state:"Nebraska"}],k={args:{columns:T,data:x,getRowId:({id:t})=>t}},S={args:{columns:T,data:x,getRowId:({id:t})=>t},render:function(r){const o=e.useRef(15),d=e.useMemo(()=>r.data??[],[r]),[p,f]=e.useState(d.slice(0,o.current)),n=e.useCallback(()=>{o.current=o.current+10,f(d.slice(0,Math.min(o.current,d.length)))},[d]);return i.jsx(I,{...r,data:p,fetchMoreData:n})}},D={args:{columns:T,data:x,getRowId:({id:t})=>t,hasRowSelection:!0}},R={args:{columns:T,data:x,getRowId:({id:t})=>t,ToolbarButtons:({table:t})=>i.jsx(ge,{label:"New Action",onClick:()=>console.info(t.getState()),variant:"primary"})}};var F,W,G;k.parameters={...k.parameters,docs:{...(F=k.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id
+  }
+}`,...(G=(W=k.parameters)==null?void 0:W.docs)==null?void 0:G.source}}};var q,U,_;S.parameters={...S.parameters,docs:{...(q=S.parameters)==null?void 0:q.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id
+  },
+  render: function C(args) {
+    const countRef = useRef(15);
+    const dataArg = useMemo(() => args.data ?? [], [args]);
+    const [data, setData] = useState(dataArg.slice(0, countRef.current));
+    const fetchMoreData = useCallback(() => {
+      countRef.current = countRef.current + 10;
+      setData(dataArg.slice(0, Math.min(countRef.current, dataArg.length)));
+    }, [dataArg]);
+    return <PaginatedTable {...args} data={data} fetchMoreData={fetchMoreData} />;
+  }
+}`,...(_=(U=S.parameters)==null?void 0:U.docs)==null?void 0:_.source}}};var H,Q,X;D.parameters={...D.parameters,docs:{...(H=D.parameters)==null?void 0:H.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id,
+    hasRowSelection: true
+  }
+}`,...(X=(Q=D.parameters)==null?void 0:Q.docs)==null?void 0:X.source}}};var Y,Z,$;R.parameters={...R.parameters,docs:{...(Y=R.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+  args: {
+    columns,
+    data,
+    getRowId: ({
+      id
+    }: {
+      id: string;
+    }) => id,
+    ToolbarButtons: ({
+      table
+    }) => <Button label="New Action" onClick={() => console.info(table.getState())} variant="primary" />
+  }
+}`,...($=(Z=R.parameters)==null?void 0:Z.docs)==null?void 0:$.source}}};const fa=["BasicUsage","Pagination","Selection","CustomToolbar"];export{k as BasicUsage,R as CustomToolbar,S as Pagination,D as Selection,fa as __namedExportsOrder,pa as default};

package/dist/assets/Pagination-CgxBDBwQ.js

@@ -0,0 +1,11 @@
+import{n as v}from"./createTheme-BmPXDA4p.js";import{r as e}from"./index-NdkWRN8K.js";import{M as E}from"./Box-BXOPvc0Q.js";import{u as te}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{a as B}from"./Typography-CiNRLenM.js";import{u as F}from"./useTranslation-vEf1lqoc.js";import{j as o}from"./jsx-runtime-CnH95YSl.js";import{M as re,a as se}from"./ArrowRight-DCIAiEpA.js";import{I as ie}from"./InputBase--xDu7aWm.js";import{M as w}from"./Button-BOzIr8Jh.js";/*!
+ * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */const le=({currentRowsCount:n,pageIndex:x,pageSize:M,totalRows:d})=>{const{t:p}=F();return e.useMemo(()=>{const i=M*(x-1)+1,c=i+(n-1),b=n===0?p("pagination.totalrows",{totalRows:0}):d?p("pagination.rowswithtotal",{firstRow:i,lastRow:c,totalRows:d}):p("pagination.rowswithouttotal",{firstRow:i,lastRow:c});return{firstRow:i,lastRow:c,totalRowsLabel:b}},[n,x,M,d,p])},ue=v("nav")({display:"flex",justifyContent:"space-between"}),T=v("div",{shouldForwardProp:n=>n!=="odysseyDesignTokens"})(({odysseyDesignTokens:n})=>({display:"flex",alignItems:"center",gap:n.Spacing4,"& > div":{display:"flex",alignItems:"center",gap:n.Spacing2}})),z=v(ie,{shouldForwardProp:n=>n!=="odysseyDesignTokens"})(({odysseyDesignTokens:n})=>({borderColor:n.HueNeutral200,borderRadius:n.BorderRadiusTight,height:n.Spacing6,width:"4.5714285714rem","&:hover":{borderColor:n.HueNeutral400},"&.Mui-focused:hover":{borderColor:n.PalettePrimaryMain}})),ce=v("div")({"& > *":{marginInlineStart:"0 !important"}}),pe=({currentPageLabel:n,currentRowsCount:x,hasPageInput:M=!0,hasRowCountInput:d=!0,hasRowCountLabel:p=!0,isDisabled:i,isMoreDisabled:c,lastRow:b,loadMoreLabel:D,maxPageIndex:P,maxPageSize:h,nextLabel:A,onPaginationChange:I,pageIndex:g,pageSize:f,previousLabel:H,rowsPerPageLabel:K,totalRows:t,variant:O})=>{const y=te(),{t:m}=F(),[u,C]=e.useState(g),[r,j]=e.useState(f),q=e.useRef(f),k=n??m("pagination.page"),G=D??m("pagination.loadmore"),J=A??m("pagination.next"),Q=H??m("pagination.previous"),L=K??m("pagination.rowsperpage");e.useEffect(()=>{C(g),j(f)},[g,f]);const s=e.useCallback(({pageIndex:a,pageSize:l})=>{I({pageIndex:a,pageSize:l})},[I]),{totalRowsLabel:U}=le({pageIndex:g,pageSize:f,currentRowsCount:x||0,totalRows:t}),N=e.useCallback(()=>{let a=u,l=r;if(t){const S=Math.ceil(t/l);l>t&&(l=t),a>S?a=S:a<1&&(a=1)}s({pageIndex:a,pageSize:l})},[u,r,s,t]),V=e.useCallback(a=>{a.key==="Enter"&&s({pageIndex:Number(a.currentTarget.value),pageSize:r})},[r,s]),W=e.useCallback(a=>{a.key==="Enter"&&s({pageIndex:u,pageSize:Number(a.currentTarget.value)})},[u,s]),X=e.useCallback(a=>{const l=P?Math.min(Number(a.target.value),P):Number(a.target.value);C(Math.max(1,l))},[C,P]),Y=e.useCallback(a=>{const l=h?Math.min(Number(a.target.value),h):Number(a.target.value);j(Math.max(1,l))},[j,h]),Z=e.useCallback(()=>{s({pageIndex:1,pageSize:r+q.current})},[r,s]),_=e.useCallback(()=>{s({pageIndex:u+1,pageSize:r})},[s,u,r]),$=e.useCallback(()=>{s({pageIndex:u-1,pageSize:r})},[s,u,r]),R=e.useMemo(()=>c||(t?r>=t:!1),[c,r,t]),ee=e.useMemo(()=>c||b&&(t?b>=t:!1)||i,[c,t,b,i]),ae=e.useMemo(()=>g<=1||i,[g,i]),ne=e.useMemo(()=>({"aria-label":L,max:h||t}),[h,L,t]),oe=e.useMemo(()=>({"aria-label":k,max:P}),[k,P]);return O==="paged"?o.jsxs(ue,{"aria-label":m("pagination.label"),children:[o.jsxs(T,{odysseyDesignTokens:y,children:[d&&o.jsxs(E,{children:[o.jsx(B,{color:"textSecondary",component:"span",children:L}),o.jsx(z,{disabled:i,inputProps:ne,odysseyDesignTokens:y,onBlur:N,onChange:Y,onKeyDown:W,type:"number",value:r})]}),p&&o.jsx(B,{color:"textSecondary",component:"span",children:U})]}),o.jsxs(T,{odysseyDesignTokens:y,children:[t&&M&&o.jsxs(E,{children:[o.jsx(B,{color:"textSecondary",component:"span",children:k}),o.jsx(z,{disabled:i,inputProps:oe,odysseyDesignTokens:y,onBlur:N,onChange:X,onKeyDown:V,type:"number",value:u})]}),o.jsxs(ce,{children:[o.jsx(w,{ariaLabel:Q,isDisabled:ae,onClick:$,size:"small",startIcon:o.jsx(re,{}),variant:"floating"}),o.jsx(w,{ariaLabel:J,endIcon:o.jsx(se,{}),isDisabled:ee,onClick:_,size:"small",variant:"floating"})]})]})]}):o.jsx(w,{isDisabled:R,label:G,onClick:Z,variant:"secondary"})},ge=e.memo(pe);ge.displayName="Pagination";export{ge as M,le as u};

package/dist/assets/Pagination.stories-7dUsTYEf.js

@@ -0,0 +1,17 @@
+import{j as g}from"./jsx-runtime-CnH95YSl.js";import{p as o}from"./constants-CyailK6t.js";import{M as c}from"./Pagination-CgxBDBwQ.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./createTheme-BmPXDA4p.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./useTheme-C05bJKih.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./Typography-CiNRLenM.js";import"./Typography-D7-qxuiy.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./typographyClasses-D8vr2n3l.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./ArrowRight-DCIAiEpA.js";import"./SvgIcon-BQAg6Jm7.js";import"./InputBase--xDu7aWm.js";import"./useFormControl-BMISTZuX.js";import"./utils-iop7lDec.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./isHostComponent-DVu5iVWx.js";import"./GlobalStyles-BxDN_5FT.js";import"./Button-BOzIr8Jh.js";import"./BaseButton-B5c4cgt8.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./index-CpbQl8EB.js";import"./tooltipClasses-C74HjonW.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./inheritsLoose-CWawPfk8.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./useControlled-NQulfz4l.js";import"./useId-cMcvCE23.js";import"./Popper-CwLH-7YW.js";import"./popper-CMBiYTiD.js";import"./Button-BqwcAVQ-.js";import"./buttonClasses-DtIJBSf4.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./buttonBaseClasses-CSPKg76d.js";const ge={component:c,argTypes:{pageIndex:{control:{type:"number",min:1},description:"The current page index",type:{required:!0,name:"number"}},pageSize:{control:{type:"number",min:1},description:"The current page size",type:{required:!0,name:"number"}},onPaginationChange:{description:"Page index and page size setter",type:{required:!0,name:"function"}},lastRow:{control:{type:"number",min:1},description:"The current page last row index",type:{required:!0,name:"number"}},totalRows:{control:{type:"number",min:1},description:"Total rows count",type:{name:"number"}},hasPageInput:{control:"boolean",description:"If true, the page input will be visible and the user can directly manipulate which page is visible.",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},hasRowCountInput:{control:"boolean",description:"If true, the row count input will be visible and the user can directly manipulate how many rows are visible.",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},hasRowCountLabel:{control:"boolean",description:"If true, the pagination controls will be disabled.",table:{type:{summary:"boolean"},defaultValue:{summary:"true"}}},isDisabled:{control:"boolean",description:"If true, the pagination controls will be disabled",type:{required:!0,name:"boolean"}},isMoreDisabled:{control:"boolean",description:"If true, the pagination next/show more button will be disabled",type:{required:!0,name:"boolean"}},variant:{control:{type:"radio"},options:o,description:'The type of pagination controls shown, defaults to next/prev buttons, but can set to a simple Load more button by setting to "loadMore".',type:{name:"other",value:"radio"},table:{defaultValue:{summary:o[0]}}},rowsPerPageLabel:{control:"text",description:"The label that shows how many results are rendered per page",type:{required:!0,name:"string"}},currentPageLabel:{control:"text",description:"The labeled rendered for the current page index",type:{required:!0,name:"string"}},previousLabel:{control:"text",description:"The label for the previous control",type:{required:!0,name:"string"}},nextLabel:{control:"text",description:"The label for the next control",type:{required:!0,name:"string"}},loadMoreLabel:{control:"text",description:'If the pagination is of "loadMore" variant, then this is the the load more label',type:{required:!0,name:"string"}},maxPageIndex:{control:"number",description:"The highest page number allowed to be manually input in pagination.",table:{type:{summary:"number"}}},maxPageSize:{control:"number",description:"The largest number of rows allowed to be shown per page. This only affects the row input in pagination.",table:{type:{summary:"number"}}},currentRowsCount:{control:"number",description:"The number of items currently visible on the page",table:{type:{summary:"number"}}}},args:{pageIndex:1,pageSize:20,lastRow:20,currentRowsCount:20,hasPageInput:!0,hasRowCountInput:!0,hasRowCountLabel:!0,isDisabled:!1,variant:"paged",rowsPerPageLabel:"Rows per page",currentPageLabel:"Page",previousLabel:"Previous page",nextLabel:"Next page",loadMoreLabel:"Show more",totalRows:100},tags:["autodocs"]},e={render:b=>g.jsx(c,{...b})},t={...e,args:{variant:"loadMore"}},r={...e,args:{hasPageInput:!1,hasRowCountInput:!1,hasRowCountLabel:!1}};var a,n,i;e.parameters={...e.parameters,docs:{...(a=e.parameters)==null?void 0:a.docs,source:{originalSource:`{
+  render: props => {
+    return <Pagination {...props} />;
+  }
+}`,...(i=(n=e.parameters)==null?void 0:n.docs)==null?void 0:i.source}}};var p,s,u;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  ...Default,
+  args: {
+    variant: "loadMore"
+  }
+}`,...(u=(s=t.parameters)==null?void 0:s.docs)==null?void 0:u.source}}};var m,l,d;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{
+  ...Default,
+  args: {
+    hasPageInput: false,
+    hasRowCountInput: false,
+    hasRowCountLabel: false
+  }
+}`,...(d=(l=r.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};const he=["Default","LoadMore","JustButtons"];export{e as Default,r as JustButtons,t as LoadMore,he as __namedExportsOrder,ge as default};

package/dist/assets/Paper-DbAuDGNI.js

@@ -0,0 +1 @@
+import{g,_ as x,a as s,c as m,d as l}from"./createTheme-BmPXDA4p.js";import{r as P}from"./index-NdkWRN8K.js";import{u as b,s as R,c as $}from"./DefaultPropsProvider-B7tpShA7.js";import{g as y}from"./generateUtilityClasses-DYvjsuMV.js";import{j as C}from"./jsx-runtime-CnH95YSl.js";const v=a=>{let e;return a<1?e=5.11916*a**2:e=4.5*Math.log(a+1)+2,(e/100).toFixed(2)};function M(a){return g("MuiPaper",a)}y("MuiPaper",["root","rounded","outlined","elevation","elevation0","elevation1","elevation2","elevation3","elevation4","elevation5","elevation6","elevation7","elevation8","elevation9","elevation10","elevation11","elevation12","elevation13","elevation14","elevation15","elevation16","elevation17","elevation18","elevation19","elevation20","elevation21","elevation22","elevation23","elevation24"]);const k=["className","component","elevation","square","variant"],q=a=>{const{square:e,elevation:o,variant:t,classes:n}=a,r={root:["root",t,!e&&"rounded",t==="elevation"&&`elevation${o}`]};return $(r,M,n)},_=R("div",{name:"MuiPaper",slot:"Root",overridesResolver:(a,e)=>{const{ownerState:o}=a;return[e.root,e[o.variant],!o.square&&e.rounded,o.variant==="elevation"&&e[`elevation${o.elevation}`]]}})(({theme:a,ownerState:e})=>{var o;return s({backgroundColor:(a.vars||a).palette.background.paper,color:(a.vars||a).palette.text.primary,transition:a.transitions.create("box-shadow")},!e.square&&{borderRadius:a.shape.borderRadius},e.variant==="outlined"&&{border:`1px solid ${(a.vars||a).palette.divider}`},e.variant==="elevation"&&s({boxShadow:(a.vars||a).shadows[e.elevation]},!a.vars&&a.palette.mode==="dark"&&{backgroundImage:`linear-gradient(${l.alpha("#fff",v(e.elevation))}, ${l.alpha("#fff",v(e.elevation))})`},a.vars&&{backgroundImage:(o=a.vars.overlays)==null?void 0:o[e.elevation]}))}),A=P.forwardRef(function(e,o){const t=b({props:e,name:"MuiPaper"}),{className:n,component:r="div",elevation:p=1,square:u=!1,variant:d="elevation"}=t,c=x(t,k),i=s({},t,{component:r,elevation:p,square:u,variant:d}),f=q(i);return C.jsx(_,s({as:r,ownerState:i,className:m(f.root,n),ref:o},c))});export{A as P};