@okta/odyssey-react-mui 1.13.5 → 1.13.7

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.13.7](https://github.com/okta/odyssey/compare/v1.13.6...v1.13.7) (2024-02-13)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
+## [1.13.6](https://github.com/okta/odyssey/compare/v1.13.5...v1.13.6) (2024-02-13)
+
+**Note:** Version bump only for package @okta/odyssey-react-mui
+
 ## [1.13.5](https://github.com/okta/odyssey/compare/v1.13.4...v1.13.5) (2024-02-13)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Button.js

@@ -16,7 +16,7 @@ import { Tooltip } from "./Tooltip.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const buttonSizeValues = ["small", "medium", "large"];
 export const buttonTypeValues = ["button", "submit", "reset"];
-export const buttonVariantValues = ["primary", "secondary", "tertiary", "danger", "floating"];
+export const buttonVariantValues = ["primary", "secondary", "danger", "floating"];
 const Button = ({
   ariaDescribedBy,
   ariaLabel,
@@ -35,9 +35,10 @@ const Button = ({
   tooltipText,
   translate,
   type = "button",
-  variant
+  variant: variantProp
 }) => {
   const muiProps = useMuiProps();
+  const variant = variantProp === "tertiary" ? "secondary" : variantProp;
   const localButtonRef = useRef(null);
   useImperativeHandle(buttonRef, () => {
     return {

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useRef","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaDescribedBy","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","muiProps","localButtonRef","focus","current","renderButton","ref","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  HtmlProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const renderButton = useCallback(\n    (muiProps) => {\n      muiProps?.ref?.(localButtonRef.current);\n\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          id={id}\n          onClick={onClick}\n          ref={localButtonRef}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ]\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAEEA,IAAI,EAEJC,WAAW,EACXC,mBAAmB,EACnBC,MAAM,QACD,OAAO;AAAC,SAENC,eAAe,EAAEC,WAAW;AAAA,SAC5BC,OAAO;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIhB,OAAO,MAAMC,gBAAgB,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAU;AACrE,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU;AACtE,OAAO,MAAMC,mBAAmB,GAAG,CACjC,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,EACR,UAAU,CACF;AAmFV,MAAMC,MAAM,GAAGA,CAAC;EACdC,eAAe;EACfC,SAAS;EACTC,cAAc;EACdC,SAAS;EACTC,OAAO;EACPC,EAAE;EACFC,UAAU;EACVC,WAAW;EACXC,KAAK,GAAG,EAAE;EACVC,OAAO;EACPC,IAAI,GAAG,QAAQ;EACfC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,WAAW;EACXC,SAAS;EACTC,IAAI,GAAG,QAAQ;EACfC;AACW,CAAC,KAAK;EACjB,MAAMC,QAAQ,GAAG1B,WAAW,CAAC,CAAC;EAC9B,MAAM2B,cAAc,GAAG7B,MAAM,CAAoB,IAAI,CAAC;EAEtDD,mBAAmB,CACjBc,SAAS,EACT,MAAM;IACJ,OAAO;MACLiB,KAAK,EAAEA,CAAA,KAAM;QACXD,cAAc,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MACjC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAME,YAAY,GAAGlC,WAAW,CAC7B8B,QAAQ,IAAK;IACZA,QAAQ,EAAEK,GAAG,GAAGJ,cAAc,CAACE,OAAO,CAAC;IAEvC,OACE1B,IAAA,CAAA6B,OAAA;MAAA,GACMN,QAAQ;MACZ,cAAYjB,SAAU;MACtB,mBAAiBC,cAAe;MAChC,oBAAkBF,eAAgB;MAClC,WAASa,MAAO;MAChBY,QAAQ,EAAEnB,UAAW;MACrBF,OAAO,EAAEA,OAAQ;MACjBsB,SAAS,EAAEnB,WAAY;MACvBF,EAAE,EAAEA,EAAG;MACPI,OAAO,EAAEA,OAAQ;MACjBc,GAAG,EAAEJ,cAAe;MACpBT,IAAI,EAAEA,IAAK;MACXC,SAAS,EAAEA,SAAU;MACrBC,QAAQ,EAAEA,QAAS;MACnBG,SAAS,EAAEA,SAAU;MACrBC,IAAI,EAAEA,IAAK;MACXC,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAEhBnB;IAAK,CACG,CAAC;EAEhB,CAAC,EACD,CACER,eAAe,EACfC,SAAS,EACTC,cAAc,EACdE,OAAO,EACPC,EAAE,EACFC,UAAU,EACVC,WAAW,EACXC,KAAK,EACLC,OAAO,EACPC,IAAI,EACJC,SAAS,EACTC,QAAQ,EACRC,MAAM,EACNE,SAAS,EACTC,IAAI,EACJC,OAAO,CAEX,CAAC;EAED,IAAIH,WAAW,EAAE;IACf,OACEnB,IAAA,CAACF,OAAO;MAACmC,QAAQ,EAAC,aAAa;MAACC,SAAS,EAAC,KAAK;MAACC,IAAI,EAAEhB,WAAY;MAAAa,QAAA,EAChEhC,IAAA,CAACJ,eAAe,CAACwC,QAAQ;QAAAJ,QAAA,EAAEL;MAAY,CAA2B;IAAC,CAC5D,CAAC;EAEd;EAEA,OAAOA,YAAY,CAACJ,QAAQ,CAAC;AAC/B,CAAC;AAED,MAAMc,cAAc,GAAG7C,IAAI,CAACY,MAAM,CAAC;AACnCiC,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIjC,MAAM"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useRef","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","ariaDescribedBy","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","tabIndex","testId","tooltipText","translate","type","variant","variantProp","muiProps","localButtonRef","focus","current","renderButton","ref","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  ComponentProps,\n  HTMLAttributes,\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.\n   *\n   * value: A space-separated list of one or more ID values referencing the elements being controlled by the current element\n   */\n  ariaControls?: ComponentProps<\"button\">[\"aria-controls\"];\n  /**\n   * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.\n   */\n  ariaExpanded?: ComponentProps<\"button\">[\"aria-expanded\"];\n  /**\n   * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.\n   */\n  ariaHasPopup?: ComponentProps<\"button\">[\"aria-haspopup\"];\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number] | \"tertiary\";\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  HtmlProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  tabIndex,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant: variantProp,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  // We're deprecating the \"tertiary\" variant, so map it to\n  // \"secondary\" in lieu of making a breaking change\n  const variant = variantProp === \"tertiary\" ? \"secondary\" : variantProp;\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const renderButton = useCallback(\n    (muiProps) => {\n      muiProps?.ref?.(localButtonRef.current);\n\n      return (\n        <MuiButton\n          {...muiProps}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-describedby={ariaDescribedBy}\n          data-se={testId}\n          disabled={isDisabled}\n          endIcon={endIcon}\n          fullWidth={isFullWidth}\n          id={id}\n          onClick={onClick}\n          ref={localButtonRef}\n          size={size}\n          startIcon={startIcon}\n          tabIndex={tabIndex}\n          translate={translate}\n          type={type}\n          variant={variant}\n        >\n          {label}\n        </MuiButton>\n      );\n    },\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      tabIndex,\n      testId,\n      translate,\n      type,\n      variant,\n    ]\n  );\n\n  if (tooltipText) {\n    return (\n      <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n        <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n      </Tooltip>\n    );\n  }\n\n  return renderButton(muiProps);\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}

package/dist/MenuButton.js

@@ -64,9 +64,9 @@ const MenuButton = ({
   }), [menuAlignment]);
   return _jsxs("div", {
     children: [_jsx(Button, {
-      "aria-controls": isOpen ? `${uniqueId}-menu` : undefined,
-      "aria-expanded": isOpen ? "true" : undefined,
-      "aria-haspopup": "true",
+      ariaControls: isOpen ? `${uniqueId}-menu` : undefined,
+      ariaExpanded: isOpen ? "true" : undefined,
+      ariaHasPopup: "true",
       ariaDescribedBy: ariaDescribedBy,
       ariaLabel: ariaLabel,
       ariaLabelledBy: ariaLabelledBy,

package/dist/MenuButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuButton.js","names":["memo","useCallback","useMemo","useState","Button","useUniqueId","ChevronDownIcon","MoreIcon","MenuContext","jsx","_jsx","jsxs","_jsxs","menuAlignmentValues","MenuButton","ariaLabel","ariaLabelledBy","ariaDescribedBy","buttonLabel","buttonVariant","children","shouldCloseOnSelect","endIcon","endIconProp","id","idOverride","isDisabled","isOverflow","menuAlignment","size","testId","tooltipText","translate","anchorEl","setAnchorEl","isOpen","Boolean","closeMenu","openMenu","event","currentTarget","uniqueId","menuListProps","providerValue","anchorOrigin","horizontal","vertical","transformOrigin","undefined","label","onClick","variant","_Menu","MenuListProps","onClose","open","Provider","value","MemoizedMenuButton","displayName"],"sources":["../src/MenuButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, type ReactElement, useCallback, useMemo, useState } from \"react\";\nimport {\n  Divider,\n  ListSubheader,\n  Menu as MuiMenu,\n  PopoverOrigin,\n} from \"@mui/material\";\n\nimport {\n  Button,\n  buttonSizeValues,\n  buttonVariantValues,\n  MenuItem,\n  useUniqueId,\n} from \"./\";\nimport { ChevronDownIcon, MoreIcon } from \"./icons.generated\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { MenuContext, MenuContextType } from \"./MenuContext\";\nimport { NullElement } from \"./NullElement\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const menuAlignmentValues = [\"left\", \"right\"] as const;\n\nexport type MenuButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The label on the triggering Button\n   */\n  buttonLabel?: string;\n  /**\n   * The variant of the triggering Button\n   */\n  buttonVariant?: (typeof buttonVariantValues)[number];\n  /**\n   * The <MenuItem> components within the Menu.\n   */\n  children:\n    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n    | Array<\n        | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n        | NullElement\n      >\n    | NullElement;\n  /**\n   * The end Icon on the trigggering Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The id of the Button\n   */\n  id?: string;\n  /**\n   * If the MenuButton is an overflow menu or standard menu.\n   */\n  isOverflow?: boolean;\n  /**\n   * The horizontal alignment of the menu.\n   */\n  menuAlignment?: (typeof menuAlignmentValues)[number];\n  /**\n   * If true (the default), the menu will close when a child MenuItem is clicked.\n   * Otherwise, it will remain open.\n   */\n  shouldCloseOnSelect?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n} & (\n  | {\n      ariaLabel?: string;\n      ariaLabelledBy?: string;\n      buttonLabel: string;\n    }\n  | {\n      ariaLabel: string;\n      ariaLabelledBy?: string;\n      buttonLabel?: undefined | \"\";\n    }\n  | {\n      ariaLabel?: string;\n      ariaLabelledBy: string;\n      buttonLabel?: undefined | \"\";\n    }\n) &\n  Pick<FieldComponentProps, \"isDisabled\"> &\n  HtmlProps;\n\nconst MenuButton = ({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  buttonLabel = \"\",\n  buttonVariant = \"secondary\",\n  children,\n  shouldCloseOnSelect = true,\n  endIcon: endIconProp,\n  id: idOverride,\n  isDisabled,\n  isOverflow,\n  menuAlignment = \"left\",\n  size,\n  testId,\n  tooltipText,\n  translate,\n}: MenuButtonProps) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const isOpen = Boolean(anchorEl);\n\n  const closeMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  const openMenu = useCallback<MenuContextType[\"openMenu\"]>((event) => {\n    setAnchorEl(event.currentTarget);\n  }, []);\n\n  const uniqueId = useUniqueId(idOverride);\n\n  const menuListProps = useMemo(\n    () => ({ \"aria-labelledby\": `${uniqueId}-button` }),\n    [uniqueId]\n  );\n\n  const providerValue = useMemo<MenuContextType>(\n    () => ({\n      closeMenu,\n      openMenu,\n      shouldCloseOnSelect,\n    }),\n    [closeMenu, openMenu, shouldCloseOnSelect]\n  );\n\n  const endIcon = endIconProp ? (\n    endIconProp\n  ) : isOverflow ? (\n    <MoreIcon />\n  ) : (\n    <ChevronDownIcon />\n  );\n\n  const anchorOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"bottom\",\n      } as PopoverOrigin),\n    [menuAlignment]\n  );\n\n  const transformOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"top\",\n      } as PopoverOrigin),\n    [menuAlignment]\n  );\n\n  return (\n    <div>\n      <Button\n        aria-controls={isOpen ? `${uniqueId}-menu` : undefined}\n        aria-expanded={isOpen ? \"true\" : undefined}\n        aria-haspopup=\"true\"\n        ariaDescribedBy={ariaDescribedBy}\n        ariaLabel={ariaLabel}\n        ariaLabelledBy={ariaLabelledBy}\n        data-se={testId}\n        endIcon={endIcon}\n        id={`${uniqueId}-button`}\n        isDisabled={isDisabled}\n        label={buttonLabel}\n        onClick={openMenu}\n        size={size}\n        tooltipText={tooltipText}\n        translate={translate}\n        variant={buttonVariant}\n      />\n\n      <MuiMenu\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        anchorEl={anchorEl}\n        id={`${uniqueId}-menu`}\n        MenuListProps={menuListProps}\n        onClose={closeMenu}\n        open={isOpen}\n      >\n        <MenuContext.Provider value={providerValue}>\n          {children}\n        </MenuContext.Provider>\n      </MuiMenu>\n    </div>\n  );\n};\n\nconst MemoizedMenuButton = memo(MenuButton);\nMemoizedMenuButton.displayName = \"MenuButton\";\n\nexport { MemoizedMenuButton as MenuButton };\n"],"mappings":"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"}
+{"version":3,"file":"MenuButton.js","names":["memo","useCallback","useMemo","useState","Button","useUniqueId","ChevronDownIcon","MoreIcon","MenuContext","jsx","_jsx","jsxs","_jsxs","menuAlignmentValues","MenuButton","ariaLabel","ariaLabelledBy","ariaDescribedBy","buttonLabel","buttonVariant","children","shouldCloseOnSelect","endIcon","endIconProp","id","idOverride","isDisabled","isOverflow","menuAlignment","size","testId","tooltipText","translate","anchorEl","setAnchorEl","isOpen","Boolean","closeMenu","openMenu","event","currentTarget","uniqueId","menuListProps","providerValue","anchorOrigin","horizontal","vertical","transformOrigin","ariaControls","undefined","ariaExpanded","ariaHasPopup","label","onClick","variant","_Menu","MenuListProps","onClose","open","Provider","value","MemoizedMenuButton","displayName"],"sources":["../src/MenuButton.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, type ReactElement, useCallback, useMemo, useState } from \"react\";\nimport {\n  Divider,\n  ListSubheader,\n  Menu as MuiMenu,\n  PopoverOrigin,\n} from \"@mui/material\";\n\nimport {\n  Button,\n  buttonSizeValues,\n  buttonVariantValues,\n  MenuItem,\n  useUniqueId,\n} from \"./\";\nimport { ChevronDownIcon, MoreIcon } from \"./icons.generated\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { MenuContext, MenuContextType } from \"./MenuContext\";\nimport { NullElement } from \"./NullElement\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const menuAlignmentValues = [\"left\", \"right\"] as const;\n\nexport type MenuButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The label on the triggering Button\n   */\n  buttonLabel?: string;\n  /**\n   * The variant of the triggering Button\n   */\n  buttonVariant?: (typeof buttonVariantValues)[number];\n  /**\n   * The <MenuItem> components within the Menu.\n   */\n  children:\n    | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n    | Array<\n        | ReactElement<typeof MenuItem | typeof Divider | typeof ListSubheader>\n        | NullElement\n      >\n    | NullElement;\n  /**\n   * The end Icon on the trigggering Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The id of the Button\n   */\n  id?: string;\n  /**\n   * If the MenuButton is an overflow menu or standard menu.\n   */\n  isOverflow?: boolean;\n  /**\n   * The horizontal alignment of the menu.\n   */\n  menuAlignment?: (typeof menuAlignmentValues)[number];\n  /**\n   * If true (the default), the menu will close when a child MenuItem is clicked.\n   * Otherwise, it will remain open.\n   */\n  shouldCloseOnSelect?: boolean;\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n} & (\n  | {\n      ariaLabel?: string;\n      ariaLabelledBy?: string;\n      buttonLabel: string;\n    }\n  | {\n      ariaLabel: string;\n      ariaLabelledBy?: string;\n      buttonLabel?: undefined | \"\";\n    }\n  | {\n      ariaLabel?: string;\n      ariaLabelledBy: string;\n      buttonLabel?: undefined | \"\";\n    }\n) &\n  Pick<FieldComponentProps, \"isDisabled\"> &\n  HtmlProps;\n\nconst MenuButton = ({\n  ariaLabel,\n  ariaLabelledBy,\n  ariaDescribedBy,\n  buttonLabel = \"\",\n  buttonVariant = \"secondary\",\n  children,\n  shouldCloseOnSelect = true,\n  endIcon: endIconProp,\n  id: idOverride,\n  isDisabled,\n  isOverflow,\n  menuAlignment = \"left\",\n  size,\n  testId,\n  tooltipText,\n  translate,\n}: MenuButtonProps) => {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  const isOpen = Boolean(anchorEl);\n\n  const closeMenu = useCallback(() => {\n    setAnchorEl(null);\n  }, []);\n\n  const openMenu = useCallback<MenuContextType[\"openMenu\"]>((event) => {\n    setAnchorEl(event.currentTarget);\n  }, []);\n\n  const uniqueId = useUniqueId(idOverride);\n\n  const menuListProps = useMemo(\n    () => ({ \"aria-labelledby\": `${uniqueId}-button` }),\n    [uniqueId]\n  );\n\n  const providerValue = useMemo<MenuContextType>(\n    () => ({\n      closeMenu,\n      openMenu,\n      shouldCloseOnSelect,\n    }),\n    [closeMenu, openMenu, shouldCloseOnSelect]\n  );\n\n  const endIcon = endIconProp ? (\n    endIconProp\n  ) : isOverflow ? (\n    <MoreIcon />\n  ) : (\n    <ChevronDownIcon />\n  );\n\n  const anchorOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"bottom\",\n      } as PopoverOrigin),\n    [menuAlignment]\n  );\n\n  const transformOrigin = useMemo(\n    () =>\n      ({\n        horizontal: menuAlignment,\n        vertical: \"top\",\n      } as PopoverOrigin),\n    [menuAlignment]\n  );\n\n  return (\n    <div>\n      <Button\n        ariaControls={isOpen ? `${uniqueId}-menu` : undefined}\n        ariaExpanded={isOpen ? \"true\" : undefined}\n        ariaHasPopup=\"true\"\n        ariaDescribedBy={ariaDescribedBy}\n        ariaLabel={ariaLabel}\n        ariaLabelledBy={ariaLabelledBy}\n        data-se={testId}\n        endIcon={endIcon}\n        id={`${uniqueId}-button`}\n        isDisabled={isDisabled}\n        label={buttonLabel}\n        onClick={openMenu}\n        size={size}\n        tooltipText={tooltipText}\n        translate={translate}\n        variant={buttonVariant}\n      />\n\n      <MuiMenu\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        anchorEl={anchorEl}\n        id={`${uniqueId}-menu`}\n        MenuListProps={menuListProps}\n        onClose={closeMenu}\n        open={isOpen}\n      >\n        <MenuContext.Provider value={providerValue}>\n          {children}\n        </MenuContext.Provider>\n      </MuiMenu>\n    </div>\n  );\n};\n\nconst MemoizedMenuButton = memo(MenuButton);\nMemoizedMenuButton.displayName = \"MenuButton\";\n\nexport { MemoizedMenuButton as MenuButton };\n"],"mappings":"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"}

package/dist/src/Button.d.ts

@@ -10,13 +10,27 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 import type { ButtonProps as MuiButtonProps } from "@mui/material";
-import { HTMLAttributes, ReactElement } from "react";
+import { ComponentProps, HTMLAttributes, ReactElement } from "react";
 import type { HtmlProps } from "./HtmlProps";
 import { FocusHandle } from "./inputUtils";
 export declare const buttonSizeValues: readonly ["small", "medium", "large"];
 export declare const buttonTypeValues: readonly ["button", "submit", "reset"];
-export declare const buttonVariantValues: readonly ["primary", "secondary", "tertiary", "danger", "floating"];
+export declare const buttonVariantValues: readonly ["primary", "secondary", "danger", "floating"];
 export type ButtonProps = {
+    /**
+     * The global `aria-controls` property identifies the element (or elements) whose contents or presence are controlled by the element on which this attribute is set.
+     *
+     * value: A space-separated list of one or more ID values referencing the elements being controlled by the current element
+     */
+    ariaControls?: ComponentProps<"button">["aria-controls"];
+    /**
+     * The `aria-expanded` attribute is set on an element to indicate if a control is expanded or collapsed, and whether or not the controlled elements are displayed or hidden.
+     */
+    ariaExpanded?: ComponentProps<"button">["aria-expanded"];
+    /**
+     * The `aria-haspopup` attribute indicates the availability and type of interactive popup element that can be triggered by the element on which the attribute is set.
+     */
+    ariaHasPopup?: ComponentProps<"button">["aria-haspopup"];
     /**
      * The ARIA label for the Button
      */
@@ -77,7 +91,7 @@ export type ButtonProps = {
     /**
      * The variant of the Button
      */
-    variant: (typeof buttonVariantValues)[number];
+    variant: (typeof buttonVariantValues)[number] | "tertiary";
 } & ({
     endIcon?: ReactElement;
     label: string;
@@ -91,6 +105,6 @@ export type ButtonProps = {
     label?: "" | undefined;
     startIcon?: ReactElement;
 }) & HtmlProps;
-declare const MemoizedButton: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, buttonRef, endIcon, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, tooltipText, translate, type, variant, }: ButtonProps) => JSX.Element>;
+declare const MemoizedButton: import("react").MemoExoticComponent<({ ariaDescribedBy, ariaLabel, ariaLabelledBy, buttonRef, endIcon, id, isDisabled, isFullWidth, label, onClick, size, startIcon, tabIndex, testId, tooltipText, translate, type, variant: variantProp, }: ButtonProps) => JSX.Element>;
 export { MemoizedButton as Button };
 //# sourceMappingURL=Button.d.ts.map

package/dist/src/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,cAAc,EAEd,YAAY,EAIb,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,eAAO,MAAM,gBAAgB,wCAAyC,CAAC;AACvE,eAAO,MAAM,mBAAmB,qEAMtB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,CAAC;CAC/C,GAAG,CACA;IACE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,GACD;IACE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACvB,SAAS,EAAE,YAAY,CAAC;CACzB,GACD;IACE,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CACJ,GACC,SAAS,CAAC;AAgGZ,QAAA,MAAM,cAAc,mOA3EjB,WAAW,iBA2EqB,CAAC;AAGpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAGH,OAAO,KAAK,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,cAAc,EACd,cAAc,EAEd,YAAY,EAIb,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAE3C,eAAO,MAAM,gBAAgB,uCAAwC,CAAC;AACtE,eAAO,MAAM,gBAAgB,wCAAyC,CAAC;AACvE,eAAO,MAAM,mBAAmB,yDAKtB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,eAAe,CAAC,CAAC;IACzD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC;;OAEG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,UAAU,CAAC,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAC;IACzC;;OAEG;IACH,OAAO,EAAE,CAAC,OAAO,mBAAmB,CAAC,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;CAC5D,GAAG,CACA;IACE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,GACD;IACE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACvB,SAAS,EAAE,YAAY,CAAC;CACzB,GACD;IACE,OAAO,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,EAAE,GAAG,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CACJ,GACC,SAAS,CAAC;AAoGZ,QAAA,MAAM,cAAc,gPA/EjB,WAAW,iBA+EqB,CAAC;AAGpC,OAAO,EAAE,cAAc,IAAI,MAAM,EAAE,CAAC"}

package/dist/src/theme/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAgpF5B,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAkoF5B,CAAC"}

package/dist/theme/components.js

@@ -485,6 +485,7 @@ export const components = ({
           paddingBlock: odysseyTokens.Spacing3,
           paddingInline: odysseyTokens.Spacing4,
           display: "inline-flex",
+          height: odysseyTokens.Spacing7,
           position: "relative",
           marginBlock: "0",
           marginInline: "0",
@@ -496,7 +497,7 @@ export const components = ({
           borderRadius: odysseyTokens.BorderRadiusMain,
           borderColor: "transparent",
           fontSize: odysseyTokens.TypographySizeBody,
-          fontWeight: odysseyTokens.TypographyWeightBodyBold,
+          fontWeight: odysseyTokens.TypographyWeightHeading,
           fontFamily: odysseyTokens.TypographyFamilyButton,
           lineHeight: odysseyTokens.TypographyLineHeightUi,
           whiteSpace: "nowrap",
@@ -548,22 +549,6 @@ export const components = ({
               color: odysseyTokens.TypographyColorDisabled
             }
           }),
-          ...(ownerState.variant === "tertiary" && {
-            backgroundColor: odysseyTokens.HueNeutral100,
-            color: odysseyTokens.HueNeutral700,
-            "&:hover": {
-              backgroundColor: odysseyTokens.HueNeutral200,
-              color: odysseyTokens.HueNeutral800
-            },
-            "&:active": {
-              backgroundColor: odysseyTokens.HueNeutral300,
-              color: odysseyTokens.HueNeutral800
-            },
-            "&:disabled": {
-              backgroundColor: odysseyTokens.HueNeutral100,
-              color: odysseyTokens.TypographyColorDisabled
-            }
-          }),
           ...(ownerState.variant === "danger" && {
             backgroundColor: odysseyTokens.PaletteDangerMain,
             color: odysseyTokens.HueNeutralWhite,
@@ -596,16 +581,17 @@ export const components = ({
             }
           }),
           ...(ownerState.size === "small" && {
+            height: odysseyTokens.Spacing6,
             paddingBlock: odysseyTokens.Spacing2,
             paddingInline: odysseyTokens.Spacing3,
             fontSize: odysseyTokens.TypographySizeBody
           }),
           ...(ownerState.size === "large" && {
+            height: odysseyTokens.Spacing8,
             paddingBlock: odysseyTokens.Spacing4,
             paddingInline: odysseyTokens.Spacing4
           }),
           ...(ownerState.fullWidth === true && {
-            display: "block",
             width: "100%",
             marginBlock: "0",
             marginInline: "0",
@@ -621,6 +607,9 @@ export const components = ({
             },
             ...(ownerState.size === "small" && {
               padding: odysseyTokens.Spacing2
+            }),
+            ...(ownerState.size === "large" && {
+              padding: odysseyTokens.Spacing4
             })
           })
         }),