@instructure/ui-breadcrumb 11.7.8 → 11.7.9-pr-snapshot-1792147648392

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [11.7.9-pr-snapshot-1792147648392](https://github.com/instructure/instructure-ui/compare/v11.7.8...v11.7.9-pr-snapshot-1792147648392) (2026-10-16)
+
+### Build System
+
+* **many:** replace babel with swc ([7e36c54](https://github.com/instructure/instructure-ui/commit/7e36c54d240b4fa483801c03ab18e7f860f561e2))
+
+### BREAKING CHANGES
+
+* **many:** `@instructure/ui-babel-preset` and
+  `@instructure/browserslist-config-instui` are removed and will no longer be
+  published. Packages depend on `@swc/helpers` instead of `@babel/runtime`.
+
+
 ## [11.7.8](https://github.com/instructure/instructure-ui/compare/v11.7.7...v11.7.8) (2026-10-02)
 
 ### Bug Fixes

package/es/Breadcrumb/v1/BreadcrumbLink/index.js

@@ -1,119 +1,81 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { Component } from 'react';
 import { TruncateText } from '@instructure/ui-truncate-text/v11_6';
 import { Link } from '@instructure/ui-link/v11_6';
 import { omitProps } from '@instructure/ui-react-utils';
 import { Tooltip } from '@instructure/ui-tooltip/v11_6';
 import { allowedProps } from './props.js';
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-/**
----
-parent: Breadcrumb
-id: Breadcrumb.Link
----
-**/
-
 class BreadcrumbLink extends Component {
-  static displayName = 'BreadcrumbLink';
-  static componentId = 'Breadcrumb.Link';
-  static allowedProps = allowedProps;
-  static defaultProps = {};
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-  constructor(props) {
-    super(props);
-    this.state = {
-      isTruncated: false
-    };
-  }
-  handleTruncation(isTruncated) {
-    if (isTruncated !== this.state.isTruncated) {
-      this.setState({
-        isTruncated
-      });
+    static{
+        this.displayName = 'BreadcrumbLink';
+    }
+    static{
+        this.componentId = 'Breadcrumb.Link';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {};
+    }
+    constructor(props){
+        super(props), this.ref = null, this.handleRef = (el)=>{
+            this.ref = el;
+        };
+        this.state = {
+            isTruncated: false
+        };
+    }
+    handleTruncation(isTruncated) {
+        if (isTruncated !== this.state.isTruncated) {
+            this.setState({
+                isTruncated
+            });
+        }
+    }
+    render() {
+        const { children, href, renderIcon, iconPlacement, onClick, onMouseEnter, isCurrentPage } = this.props;
+        const { isTruncated } = this.state;
+        const props = omitProps(this.props, BreadcrumbLink.allowedProps);
+        const isInteractive = onClick || href;
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            renderTip: children,
+            preventTooltip: !isTruncated,
+            ...isInteractive && {
+                as: 'span'
+            },
+            children: /*#__PURE__*/ _jsx(Link, {
+                ...props,
+                href: href,
+                renderIcon: renderIcon,
+                iconPlacement: iconPlacement,
+                onClick: onClick,
+                onMouseEnter: onMouseEnter,
+                isWithinText: false,
+                elementRef: this.handleRef,
+                forceButtonRole: false,
+                ...isCurrentPage && {
+                    'aria-current': 'page'
+                },
+                ...isTruncated && {
+                    ...typeof children === 'string' && {
+                        'aria-label': children
+                    },
+                    ...!isInteractive && {
+                        role: 'text'
+                    }
+                },
+                "data-cid": "BreadcrumbLink",
+                children: /*#__PURE__*/ _jsx(TruncateText, {
+                    onUpdate: (isTruncated)=>this.handleTruncation(isTruncated),
+                    children: /*#__PURE__*/ _jsx("span", {
+                        "aria-hidden": isTruncated,
+                        children: children
+                    })
+                })
+            })
+        });
     }
-  }
-  render() {
-    const {
-      children,
-      href,
-      renderIcon,
-      iconPlacement,
-      onClick,
-      onMouseEnter,
-      isCurrentPage
-    } = this.props;
-    const {
-      isTruncated
-    } = this.state;
-    const props = omitProps(this.props, BreadcrumbLink.allowedProps);
-    const isInteractive = onClick || href;
-    return _jsx(Tooltip, {
-      renderTip: children,
-      preventTooltip: !isTruncated
-      // this wraps the achor/button tag in a span and puts the aria-describedby on that instead of the anchor/button tag
-      // to avoid SRs reading the text twice when there is already an aria-label
-      ,
-      ...(isInteractive && {
-        as: 'span'
-      }),
-      children: _jsx(Link, {
-        ...props,
-        href: href,
-        renderIcon: renderIcon,
-        iconPlacement: iconPlacement,
-        onClick: onClick,
-        onMouseEnter: onMouseEnter,
-        isWithinText: false,
-        elementRef: this.handleRef,
-        forceButtonRole: false,
-        ...(isCurrentPage && {
-          'aria-current': 'page'
-        }),
-        ...(isTruncated && {
-          ...(typeof children === 'string' && {
-            'aria-label': children
-          }),
-          ...(!isInteractive && {
-            role: 'text'
-          })
-        }),
-        "data-cid": "BreadcrumbLink",
-        children: _jsx(TruncateText, {
-          onUpdate: isTruncated => this.handleTruncation(isTruncated),
-          children: _jsx("span", {
-            "aria-hidden": isTruncated,
-            children: children
-          })
-        })
-      })
-    });
-  }
 }
 export default BreadcrumbLink;
-export { BreadcrumbLink };
+export { BreadcrumbLink };

package/es/Breadcrumb/v1/BreadcrumbLink/props.js

@@ -1,26 +1,11 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const allowedProps = ['children', 'href', 'iconPlacement', 'onClick', 'onMouseEnter', 'renderIcon', 'size', 'isCurrentPage'];
-export { allowedProps };
+const allowedProps = [
+    'children',
+    'href',
+    'iconPlacement',
+    'onClick',
+    'onMouseEnter',
+    'renderIcon',
+    'size',
+    'isCurrentPage'
+];
+export { allowedProps };

package/es/Breadcrumb/v1/index.js

@@ -1,28 +1,5 @@
-var _dec, _class;
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
+import { _ as _ts_decorate } from "@swc/helpers/_/_ts_decorate";
+import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 import { isValidElement, cloneElement, Children, Component } from 'react';
 import { View } from '@instructure/ui-view/v11_6';
 import { withStyle } from '@instructure/emotion';
@@ -31,83 +8,90 @@ import { BreadcrumbLink } from './BreadcrumbLink/index.js';
 import generateStyle from './styles.js';
 import generateComponentTheme from './theme.js';
 import { allowedProps } from './props.js';
-import { jsx as _jsx, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-/**
----
-category: components
----
-**/
-let Breadcrumb = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = class Breadcrumb extends Component {
-  static displayName = 'Breadcrumb';
-  static componentId = 'Breadcrumb';
-  static allowedProps = allowedProps;
-  static defaultProps = {
-    size: 'medium',
-    children: null
-  };
-  ref = null;
-  handleRef = el => {
-    this.ref = el;
-  };
-  addAriaCurrent = child => {
-    const updatedChild = /*#__PURE__*/cloneElement(child, {
-      'aria-current': 'page'
-    });
-    return updatedChild;
-  };
-  componentDidMount() {
-    this.props.makeStyles?.();
-  }
-  componentDidUpdate() {
-    this.props.makeStyles?.();
-  }
-  static Link = BreadcrumbLink;
-  renderChildren() {
-    const {
-      styles,
-      children
-    } = this.props;
-    const numChildren = Children.count(children);
-    const inlineStyle = {
-      maxWidth: `${Math.floor(100 / numChildren)}%`
-    };
-    let isAriaCurrentSet = false;
-    return Children.map(children, (child, index) => {
-      const isLastElement = index === numChildren - 1;
-      if (/*#__PURE__*/isValidElement(child)) {
-        const isCurrentPage = child.props.isCurrentPage || false;
-        if (isAriaCurrentSet && isCurrentPage) {}
-        if (isCurrentPage) {
-          isAriaCurrentSet = true;
-        }
-      }
-      return _jsxs("li", {
-        css: styles?.crumb,
-        style: inlineStyle,
-        children: [!isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child, index < numChildren - 1 && _jsx(IconArrowOpenEndSolid, {
-          color: "auto",
-          css: styles?.separator
-        })]
-      });
-    });
-  }
-  render() {
-    const {
-      styles
-    } = this.props;
-    return _jsx(View, {
-      role: "navigation",
-      as: "div",
-      margin: this.props.margin,
-      "aria-label": this.props.label,
-      elementRef: this.handleRef,
-      "data-cid": "Breadcrumb",
-      children: _jsx("ol", {
-        css: styles?.breadcrumb,
-        children: this.renderChildren()
-      })
-    });
-  }
-}) || _class);
+class Breadcrumb extends Component {
+    static{
+        this.displayName = 'Breadcrumb';
+    }
+    static{
+        this.componentId = 'Breadcrumb';
+    }
+    static{
+        this.allowedProps = allowedProps;
+    }
+    static{
+        this.defaultProps = {
+            size: 'medium',
+            children: null
+        };
+    }
+    componentDidMount() {
+        this.props.makeStyles?.();
+    }
+    componentDidUpdate() {
+        this.props.makeStyles?.();
+    }
+    static{
+        this.Link = BreadcrumbLink;
+    }
+    renderChildren() {
+        const { styles, children } = this.props;
+        const numChildren = Children.count(children);
+        const inlineStyle = {
+            maxWidth: `${Math.floor(100 / numChildren)}%`
+        };
+        let isAriaCurrentSet = false;
+        return Children.map(children, (child, index)=>{
+            const isLastElement = index === numChildren - 1;
+            if (/*#__PURE__*/ isValidElement(child)) {
+                const isCurrentPage = child.props.isCurrentPage || false;
+                if (isAriaCurrentSet && isCurrentPage) {
+                    void 0;
+                }
+                if (isCurrentPage) {
+                    isAriaCurrentSet = true;
+                }
+            }
+            return /*#__PURE__*/ _jsxs("li", {
+                css: styles?.crumb,
+                style: inlineStyle,
+                children: [
+                    !isAriaCurrentSet && isLastElement && child.props.isCurrentPage !== false ? this.addAriaCurrent(child) : child,
+                    index < numChildren - 1 && /*#__PURE__*/ _jsx(IconArrowOpenEndSolid, {
+                        color: "auto",
+                        css: styles?.separator
+                    })
+                ]
+            });
+        });
+    }
+    render() {
+        const { styles } = this.props;
+        return /*#__PURE__*/ _jsx(View, {
+            role: "navigation",
+            as: "div",
+            margin: this.props.margin,
+            "aria-label": this.props.label,
+            elementRef: this.handleRef,
+            "data-cid": "Breadcrumb",
+            children: /*#__PURE__*/ _jsx("ol", {
+                css: styles?.breadcrumb,
+                children: this.renderChildren()
+            })
+        });
+    }
+    constructor(...args){
+        super(...args), this.ref = null, this.handleRef = (el)=>{
+            this.ref = el;
+        }, this.addAriaCurrent = (child)=>{
+            const updatedChild = /*#__PURE__*/ cloneElement(child, {
+                'aria-current': 'page'
+            });
+            return updatedChild;
+        };
+    }
+}
+Breadcrumb = _ts_decorate([
+    withStyle(generateStyle, generateComponentTheme)
+], Breadcrumb);
 export default Breadcrumb;
-export { Breadcrumb, BreadcrumbLink };
+export { Breadcrumb, BreadcrumbLink };

package/es/Breadcrumb/v1/props.js

@@ -1,26 +1,7 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-const allowedProps = ['children', 'label', 'margin', 'size'];
-export { allowedProps };
+const allowedProps = [
+    'children',
+    'label',
+    'margin',
+    'size'
+];
+export { allowedProps };

package/es/Breadcrumb/v1/styles.js

@@ -1,106 +1,70 @@
-/*
- * The MIT License (MIT)
- *
- * Copyright (c) 2015 - present Instructure, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy
- * of this software and associated documentation files (the "Software"), to deal
- * in the Software without restriction, including without limitation the rights
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
- * copies of the Software, and to permit persons to whom the Software is
- * furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all
- * copies or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
- * SOFTWARE.
- */
-
-/**
- * ---
- * private: true
- * ---
- * Generates the style object from the theme and provided additional information
- * @param  {Object} componentTheme The theme variable object.
- * @param  {Object} props the props of the component, the style is applied to
- * @param  {Object} state the state of the component, the style is applied to
- * @return {Object} The final style object, which will be used in the component
- */
-const generateStyle = (componentTheme, props) => {
-  const {
-    size
-  } = props;
-  const crumbSizeVariants = {
-    small: {
-      fontSize: componentTheme.smallFontSize,
-      paddingInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    },
-    medium: {
-      fontSize: componentTheme.mediumFontSize,
-      paddingInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    },
-    large: {
-      fontSize: componentTheme.largeFontSize,
-      paddingInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} * 2)`,
-      paddingInlineStart: 0
-    }
-  };
-  const separatorSizeVariants = {
-    small: {
-      fontSize: componentTheme.smallSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.smallSeparatorFontSize} / 2))`
-    },
-    medium: {
-      fontSize: componentTheme.mediumSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.mediumSeparatorFontSize} / 2))`
-    },
-    large: {
-      fontSize: componentTheme.largeSeparatorFontSize,
-      insetInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} / 2)`,
-      insetInlineStart: 'auto',
-      marginTop: `calc(-1 * (${componentTheme.largeSeparatorFontSize} / 2))`
-    }
-  };
-  return {
-    breadcrumb: {
-      label: 'breadcrumb',
-      fontFamily: componentTheme.fontFamily,
-      margin: 0,
-      padding: 0,
-      listStyleType: 'none',
-      overflow: 'visible',
-      display: 'flex',
-      alignItems: 'center'
-    },
-    crumb: {
-      label: 'breadcrumb__crumb',
-      boxSizing: 'border-box',
-      position: 'relative',
-      ...crumbSizeVariants[size],
-      '&:last-child': {
-        paddingInlineEnd: 0
-      }
-    },
-    separator: {
-      label: 'breadcrumb__separator',
-      boxSizing: 'border-box',
-      position: 'absolute',
-      top: '50%',
-      color: componentTheme.separatorColor,
-      ...separatorSizeVariants[size]
-    }
-  };
+const generateStyle = (componentTheme, props)=>{
+    const { size } = props;
+    const crumbSizeVariants = {
+        small: {
+            fontSize: componentTheme.smallFontSize,
+            paddingInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} * 2)`,
+            paddingInlineStart: 0
+        },
+        medium: {
+            fontSize: componentTheme.mediumFontSize,
+            paddingInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} * 2)`,
+            paddingInlineStart: 0
+        },
+        large: {
+            fontSize: componentTheme.largeFontSize,
+            paddingInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} * 2)`,
+            paddingInlineStart: 0
+        }
+    };
+    const separatorSizeVariants = {
+        small: {
+            fontSize: componentTheme.smallSeparatorFontSize,
+            insetInlineEnd: `calc(${componentTheme.smallSeparatorFontSize} / 2)`,
+            insetInlineStart: 'auto',
+            marginTop: `calc(-1 * (${componentTheme.smallSeparatorFontSize} / 2))`
+        },
+        medium: {
+            fontSize: componentTheme.mediumSeparatorFontSize,
+            insetInlineEnd: `calc(${componentTheme.mediumSeparatorFontSize} / 2)`,
+            insetInlineStart: 'auto',
+            marginTop: `calc(-1 * (${componentTheme.mediumSeparatorFontSize} / 2))`
+        },
+        large: {
+            fontSize: componentTheme.largeSeparatorFontSize,
+            insetInlineEnd: `calc(${componentTheme.largeSeparatorFontSize} / 2)`,
+            insetInlineStart: 'auto',
+            marginTop: `calc(-1 * (${componentTheme.largeSeparatorFontSize} / 2))`
+        }
+    };
+    return {
+        breadcrumb: {
+            label: 'breadcrumb',
+            fontFamily: componentTheme.fontFamily,
+            margin: 0,
+            padding: 0,
+            listStyleType: 'none',
+            overflow: 'visible',
+            display: 'flex',
+            alignItems: 'center'
+        },
+        crumb: {
+            label: 'breadcrumb__crumb',
+            boxSizing: 'border-box',
+            position: 'relative',
+            ...crumbSizeVariants[size],
+            '&:last-child': {
+                paddingInlineEnd: 0
+            }
+        },
+        separator: {
+            label: 'breadcrumb__separator',
+            boxSizing: 'border-box',
+            position: 'absolute',
+            top: '50%',
+            color: componentTheme.separatorColor,
+            ...separatorSizeVariants[size]
+        }
+    };
 };
-export default generateStyle;
+export default generateStyle;