@fluentui/react-breadcrumb 9.0.0

package/lib/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.js

@@ -0,0 +1,161 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';
+/**
+ * Static CSS class names used internally for the component slots.
+ */
+export const breadcrumbButtonClassNames = {
+  root: 'fui-BreadcrumbButton',
+  icon: 'fui-BreadcrumbButton__icon'
+};
+/**
+ * CSS variable names used internally for styling in the Breadcrumb.
+ */
+const breadcrumbCSSVars = {
+  breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
+  breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'
+};
+const useIconStyles = /*#__PURE__*/__styles({
+  base: {
+    Be2twd7: "fsj74e5",
+    Bqenvij: "f1qfv4wv",
+    Bg96gwp: "f15xapk4",
+    a9b677: "f17j33op",
+    t21cq0: ["fm0x6gh", "fbyavb5"]
+  },
+  small: {
+    u3h8gg: "f1qfi7kw",
+    Biu6dll: "f1876atl"
+  },
+  medium: {
+    u3h8gg: "f1h9446d",
+    Biu6dll: "f10xfswh"
+  },
+  large: {
+    u3h8gg: "f5hcofs",
+    Biu6dll: "f1a6v6zl"
+  }
+}, {
+  d: [".fsj74e5{font-size:var(--fui-Breadcrumb--icon-size);}", ".f1qfv4wv{height:var(--fui-Breadcrumb--icon-size);}", ".f15xapk4{line-height:var(--fui-Breadcrumb--icon-line-height);}", ".f17j33op{width:var(--fui-Breadcrumb--icon-size);}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1qfi7kw{--fui-Breadcrumb--icon-size:12px;}", ".f1876atl{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase200);}", ".f1h9446d{--fui-Breadcrumb--icon-size:16px;}", ".f10xfswh{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase400);}", ".f5hcofs{--fui-Breadcrumb--icon-size:20px;}", ".f1a6v6zl{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase600);}"]
+});
+const defaultButtonStyles = {
+  backgroundColor: tokens.colorTransparentBackground,
+  color: tokens.colorNeutralForeground2,
+  cursor: 'auto'
+};
+const currentIconStyles = {
+  ...defaultButtonStyles,
+  [`& .${buttonClassNames.icon}`]: {
+    color: 'unset'
+  },
+  [`& .${iconFilledClassName}`]: {
+    display: 'none'
+  },
+  [`& .${iconRegularClassName}`]: {
+    display: 'inline'
+  }
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bf4jedk: "f18p0k4z",
+    j4b8c3: "fv6wr3j",
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"]
+  },
+  small: {
+    Bqenvij: "frvgh55",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "fwrc4pm",
+    z8tnut: "f16k8034",
+    z189sj: ["fdw0yi8", "fk8j09s"],
+    Byoj8tv: "f1angvds",
+    uwmqm3: ["fk8j09s", "fdw0yi8"]
+  },
+  medium: {
+    Bqenvij: "f1d2rq10",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    z8tnut: "f16k8034",
+    z189sj: ["fdw0yi8", "fk8j09s"],
+    Byoj8tv: "f1angvds",
+    uwmqm3: ["fk8j09s", "fdw0yi8"]
+  },
+  large: {
+    Bqenvij: "fbhnoac",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "faaz57k",
+    z8tnut: "f17mpqex",
+    z189sj: ["f1vdfbxk", "f1f5gg8d"],
+    Byoj8tv: "fdvome7",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"]
+  },
+  current: {
+    Jwef8y: "f9ql6rf",
+    Bi91k9c: "f3p8bqa",
+    eoavqd: "f14w7a5u",
+    Bbdnnc7: "f1irjp3o",
+    Bk3fhr4: "f19vpps7",
+    Bmfj8id: "fv5swzo",
+    iro3zm: "f3h1zc4",
+    B2d53fq: "f1xkgyln",
+    c3iz72: "f17wbbfx",
+    x3br3k: "fofxw0a",
+    em6i61: "f1ol4fw6",
+    vm6p8p: "f1q1lw4e",
+    Bszkowt: "ff24m",
+    Dyrjrp: "ft5r8e9",
+    ezr58z: "f1cbpfqp",
+    nhk3du: "f1motppv",
+    Bfrek18: "fi9vkhg",
+    G209fr: "f1fg3nnv"
+  },
+  currentSmall: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fy9rknc",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "fwrc4pm"
+  },
+  currentMedium: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "f1i3iumi"
+  },
+  currentLarge: {
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    Bg96gwp: "faaz57k"
+  }
+}, {
+  d: [".f18p0k4z{min-width:unset;}", ".fv6wr3j{text-wrap:nowrap;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".frvgh55{height:24px;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f16k8034{padding-top:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1angvds{padding-bottom:var(--spacingHorizontalSNudge);}", ".f1d2rq10{height:32px;}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".fbhnoac{height:40px;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f17mpqex{padding-top:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".fdvome7{padding-bottom:var(--spacingHorizontalS);}", ".ff24m:disabled{background-color:var(--colorTransparentBackground);}", ".ft5r8e9:disabled{color:var(--colorNeutralForeground2);}", ".f1cbpfqp:disabled{cursor:auto;}", ".f1motppv:disabled .fui-Button__icon{color:unset;}", ".fi9vkhg:disabled .fui-Icon-filled{display:none;}", ".f1fg3nnv:disabled .fui-Icon-regular{display:inline;}", ".fl43uef{font-weight:var(--fontWeightSemibold);}"],
+  h: [".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}", ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}", ".f14w7a5u:hover{cursor:auto;}", ".f1irjp3o:hover .fui-Button__icon{color:unset;}", ".f19vpps7:hover .fui-Icon-filled{display:none;}", ".fv5swzo:hover .fui-Icon-regular{display:inline;}", ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}", ".f1xkgyln:hover:active{color:var(--colorNeutralForeground2);}", ".f17wbbfx:hover:active{cursor:auto;}", ".fofxw0a:hover:active .fui-Button__icon{color:unset;}", ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}", ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}"]
+});
+/**
+ * Apply styling to the BreadcrumbButton slots based on the state
+ */
+export const useBreadcrumbButtonStyles_unstable = state => {
+  const styles = useStyles();
+  const iconStyles = useIconStyles();
+  const currentSizeMap = {
+    small: styles.currentSmall,
+    medium: styles.currentMedium,
+    large: styles.currentLarge
+  };
+  state.root.className = mergeClasses(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+  }
+  useButtonStyles_unstable(state);
+  return state;
+};
+//# sourceMappingURL=useBreadcrumbButtonStyles.styles.js.map

package/lib/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","useButtonStyles_unstable","buttonClassNames","tokens","typographyStyles","iconFilledClassName","iconRegularClassName","breadcrumbButtonClassNames","root","icon","breadcrumbCSSVars","breadcrumbIconSizeVar","breadcrumbIconLineHeightVar","useIconStyles","base","Be2twd7","Bqenvij","Bg96gwp","a9b677","t21cq0","small","u3h8gg","Biu6dll","medium","large","d","defaultButtonStyles","backgroundColor","colorTransparentBackground","color","colorNeutralForeground2","cursor","currentIconStyles","display","useStyles","Bf4jedk","j4b8c3","icvyot","vrafjx","oivjwe","wvpqe5","Bahqtrf","Bhrd7zp","z8tnut","z189sj","Byoj8tv","uwmqm3","current","Jwef8y","Bi91k9c","eoavqd","Bbdnnc7","Bk3fhr4","Bmfj8id","iro3zm","B2d53fq","c3iz72","x3br3k","em6i61","vm6p8p","Bszkowt","Dyrjrp","ezr58z","nhk3du","Bfrek18","G209fr","currentSmall","currentMedium","currentLarge","h","useBreadcrumbButtonStyles_unstable","state","styles","iconStyles","currentSizeMap","className","size"],"sources":["useBreadcrumbButtonStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { useButtonStyles_unstable, buttonClassNames } from '@fluentui/react-button';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { iconFilledClassName, iconRegularClassName } from '@fluentui/react-icons';\n/**\n * Static CSS class names used internally for the component slots.\n */ export const breadcrumbButtonClassNames = {\n    root: 'fui-BreadcrumbButton',\n    icon: 'fui-BreadcrumbButton__icon'\n};\n/**\n * CSS variable names used internally for styling in the Breadcrumb.\n */ const breadcrumbCSSVars = {\n    breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',\n    breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'\n};\nconst useIconStyles = makeStyles({\n    base: {\n        fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,\n        height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,\n        lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`,\n        width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,\n        marginRight: tokens.spacingHorizontalXS\n    },\n    small: {\n        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px',\n        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase200\n    },\n    medium: {\n        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px',\n        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase400\n    },\n    large: {\n        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px',\n        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: tokens.lineHeightBase600\n    }\n});\nconst defaultButtonStyles = {\n    backgroundColor: tokens.colorTransparentBackground,\n    color: tokens.colorNeutralForeground2,\n    cursor: 'auto'\n};\nconst currentIconStyles = {\n    ...defaultButtonStyles,\n    [`& .${buttonClassNames.icon}`]: {\n        color: 'unset'\n    },\n    [`& .${iconFilledClassName}`]: {\n        display: 'none'\n    },\n    [`& .${iconRegularClassName}`]: {\n        display: 'inline'\n    }\n};\nconst useStyles = makeStyles({\n    root: {\n        minWidth: 'unset',\n        textWrap: 'nowrap',\n        ...shorthands.border('none')\n    },\n    small: {\n        height: '24px',\n        ...typographyStyles.caption1,\n        ...shorthands.padding(tokens.spacingHorizontalSNudge)\n    },\n    medium: {\n        height: '32px',\n        ...typographyStyles.body1,\n        ...shorthands.padding(tokens.spacingHorizontalSNudge)\n    },\n    large: {\n        height: '40px',\n        ...typographyStyles.body2,\n        ...shorthands.padding(tokens.spacingHorizontalS)\n    },\n    current: {\n        ':hover': {\n            ...currentIconStyles\n        },\n        ':hover:active': {\n            ...currentIconStyles\n        },\n        ':disabled': {\n            ...currentIconStyles\n        }\n    },\n    currentSmall: {\n        ...typographyStyles.caption1Strong\n    },\n    currentMedium: {\n        ...typographyStyles.body1Strong\n    },\n    currentLarge: {\n        ...typographyStyles.subtitle2\n    }\n});\n/**\n * Apply styling to the BreadcrumbButton slots based on the state\n */ export const useBreadcrumbButtonStyles_unstable = (state)=>{\n    const styles = useStyles();\n    const iconStyles = useIconStyles();\n    const currentSizeMap = {\n        small: styles.currentSmall,\n        medium: styles.currentMedium,\n        large: styles.currentLarge\n    };\n    state.root.className = mergeClasses(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n    }\n    useButtonStyles_unstable(state);\n    return state;\n};\n"],"mappings":"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"}

package/lib/components/BreadcrumbDivider/BreadcrumbDivider.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';
+import { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';
+import { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A divider component which is used inside the Breadcrumb
+ */ export const BreadcrumbDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBreadcrumbDivider_unstable(props, ref);
+    useBreadcrumbDividerStyles_unstable(state);
+    useCustomStyleHook_unstable('useBreadcrumbDividerStyles_unstable')(state);
+    return renderBreadcrumbDivider_unstable(state);
+});
+BreadcrumbDivider.displayName = 'BreadcrumbDivider';

package/lib/components/BreadcrumbDivider/BreadcrumbDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBreadcrumbDivider_unstable } from './useBreadcrumbDivider';\nimport { renderBreadcrumbDivider_unstable } from './renderBreadcrumbDivider';\nimport { useBreadcrumbDividerStyles_unstable } from './useBreadcrumbDividerStyles.styles';\nimport type { BreadcrumbDividerProps } from './BreadcrumbDivider.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A divider component which is used inside the Breadcrumb\n */\nexport const BreadcrumbDivider: ForwardRefComponent<BreadcrumbDividerProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumbDivider_unstable(props, ref);\n\n  useBreadcrumbDividerStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbDividerStyles_unstable')(state);\n\n  return renderBreadcrumbDivider_unstable(state);\n});\n\nBreadcrumbDivider.displayName = 'BreadcrumbDivider';\n"],"names":["React","useBreadcrumbDivider_unstable","renderBreadcrumbDivider_unstable","useBreadcrumbDividerStyles_unstable","useCustomStyleHook_unstable","BreadcrumbDivider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,sCAAsC;AAG1F,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,kCAAiEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,QAAQR,8BAA8BM,OAAOC;IAEnDL,oCAAoCM;IACpCL,4BAA4B,uCAAuCK;IAEnE,OAAOP,iCAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

package/lib/components/BreadcrumbDivider/BreadcrumbDivider.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/BreadcrumbDivider/BreadcrumbDivider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BreadcrumbDividerSlots = {\n  root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbDivider Props\n */\nexport type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};\n\n/**\n * State used in rendering BreadcrumbDivider\n */\nexport type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;\n"],"names":[],"mappings":"AAAA,WAc4E"}

package/lib/components/BreadcrumbDivider/index.js

@@ -0,0 +1,5 @@
+export * from './BreadcrumbDivider';
+export * from './BreadcrumbDivider.types';
+export * from './renderBreadcrumbDivider';
+export * from './useBreadcrumbDivider';
+export * from './useBreadcrumbDividerStyles.styles';

package/lib/components/BreadcrumbDivider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './BreadcrumbDivider';\nexport * from './BreadcrumbDivider.types';\nexport * from './renderBreadcrumbDivider';\nexport * from './useBreadcrumbDivider';\nexport * from './useBreadcrumbDividerStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,sBAAsB;AACpC,cAAc,4BAA4B;AAC1C,cAAc,4BAA4B;AAC1C,cAAc,yBAAyB;AACvC,cAAc,sCAAsC"}

package/lib/components/BreadcrumbDivider/renderBreadcrumbDivider.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of BreadcrumbDivider
+ */ export const renderBreadcrumbDivider_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/BreadcrumbDivider/renderBreadcrumbDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderBreadcrumbDivider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { BreadcrumbDividerState, BreadcrumbDividerSlots } from './BreadcrumbDivider.types';\n\n/**\n * Render the final JSX of BreadcrumbDivider\n */\nexport const renderBreadcrumbDivider_unstable = (state: BreadcrumbDividerState) => {\n  assertSlots<BreadcrumbDividerSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderBreadcrumbDivider_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/CF,YAAoCE;IAEpC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/BreadcrumbDivider/useBreadcrumbDivider.js

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { ChevronRight20Regular, ChevronRight16Regular, ChevronRight12Regular, ChevronLeft20Regular, ChevronLeft16Regular, ChevronLeft12Regular } from '@fluentui/react-icons';
+import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+/**
+ * Create the state required to render BreadcrumbDivider.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,
+ * before being passed to renderBreadcrumbDivider_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbDivider
+ * @param ref - reference to root HTMLElement of BreadcrumbDivider
+ */ export const useBreadcrumbDivider_unstable = (props, ref)=>{
+    const { size } = useBreadcrumbContext_unstable();
+    const { dir } = useFluent();
+    const icon = getDividerIcon(size, dir);
+    return {
+        components: {
+            root: 'li'
+        },
+        root: slot.always(getIntrinsicElementProps('li', {
+            ref,
+            'aria-hidden': true,
+            children: icon,
+            ...props
+        }), {
+            elementType: 'li'
+        })
+    };
+};
+const dividerIcons = {
+    rtl: {
+        small: /*#__PURE__*/ React.createElement(ChevronLeft12Regular, null),
+        medium: /*#__PURE__*/ React.createElement(ChevronLeft16Regular, null),
+        large: /*#__PURE__*/ React.createElement(ChevronLeft20Regular, null)
+    },
+    ltr: {
+        small: /*#__PURE__*/ React.createElement(ChevronRight12Regular, null),
+        medium: /*#__PURE__*/ React.createElement(ChevronRight16Regular, null),
+        large: /*#__PURE__*/ React.createElement(ChevronRight20Regular, null)
+    }
+};
+/**
+ * Get icon of the divider
+ *
+ * @param size - size of the Breadcrumb
+ */ function getDividerIcon(size = 'medium', dir) {
+    const dividerIcon = dir === 'rtl' ? dividerIcons.rtl : dividerIcons.ltr;
+    if (size === 'small') {
+        return dividerIcon.small;
+    }
+    if (size === 'large') {
+        return dividerIcon.large;
+    }
+    return dividerIcon.medium;
+}

package/lib/components/BreadcrumbDivider/useBreadcrumbDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBreadcrumbDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';\nimport {\n  ChevronRight20Regular,\n  ChevronRight16Regular,\n  ChevronRight12Regular,\n  ChevronLeft20Regular,\n  ChevronLeft16Regular,\n  ChevronLeft12Regular,\n} from '@fluentui/react-icons';\nimport { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render BreadcrumbDivider.\n *\n * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,\n * before being passed to renderBreadcrumbDivider_unstable.\n *\n * @param props - props from this instance of BreadcrumbDivider\n * @param ref - reference to root HTMLElement of BreadcrumbDivider\n */\nexport const useBreadcrumbDivider_unstable = (\n  props: BreadcrumbDividerProps,\n  ref: React.Ref<HTMLLIElement>,\n): BreadcrumbDividerState => {\n  const { size } = useBreadcrumbContext_unstable();\n  const { dir } = useFluent();\n  const icon = getDividerIcon(size, dir);\n\n  return {\n    components: {\n      root: 'li',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('li', {\n        ref,\n        'aria-hidden': true,\n        children: icon,\n        ...props,\n      }),\n      { elementType: 'li' },\n    ),\n  };\n};\n\nconst dividerIcons = {\n  rtl: {\n    small: <ChevronLeft12Regular />,\n    medium: <ChevronLeft16Regular />,\n    large: <ChevronLeft20Regular />,\n  },\n  ltr: {\n    small: <ChevronRight12Regular />,\n    medium: <ChevronRight16Regular />,\n    large: <ChevronRight20Regular />,\n  },\n};\n\n/**\n * Get icon of the divider\n *\n * @param size - size of the Breadcrumb\n */\nfunction getDividerIcon(size: BreadcrumbProps['size'] = 'medium', dir: string) {\n  const dividerIcon = dir === 'rtl' ? dividerIcons.rtl : dividerIcons.ltr;\n  if (size === 'small') {\n    return dividerIcon.small;\n  }\n  if (size === 'large') {\n    return dividerIcon.large;\n  }\n  return dividerIcon.medium;\n}\n"],"names":["React","getIntrinsicElementProps","slot","ChevronRight20Regular","ChevronRight16Regular","ChevronRight12Regular","ChevronLeft20Regular","ChevronLeft16Regular","ChevronLeft12Regular","useBreadcrumbContext_unstable","useFluent_unstable","useFluent","useBreadcrumbDivider_unstable","props","ref","size","dir","icon","getDividerIcon","components","root","always","children","elementType","dividerIcons","rtl","small","medium","large","ltr","dividerIcon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SACEC,qBAAqB,EACrBC,qBAAqB,EACrBC,qBAAqB,EACrBC,oBAAoB,EACpBC,oBAAoB,EACpBC,oBAAoB,QACf,wBAAwB;AAE/B,SAASC,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEO,GAAG,EAAE,GAAGL;IAChB,MAAMM,OAAOC,eAAeH,MAAMC;IAElC,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMlB,KAAKmB,MAAM,CACfpB,yBAAyB,MAAM;YAC7Ba;YACA,eAAe;YACfQ,UAAUL;YACV,GAAGJ,KAAK;QACV,IACA;YAAEU,aAAa;QAAK;IAExB;AACF,EAAE;AAEF,MAAMC,eAAe;IACnBC,KAAK;QACHC,qBAAO,oBAAClB;QACRmB,sBAAQ,oBAACpB;QACTqB,qBAAO,oBAACtB;IACV;IACAuB,KAAK;QACHH,qBAAO,oBAACrB;QACRsB,sBAAQ,oBAACvB;QACTwB,qBAAO,oBAACzB;IACV;AACF;AAEA;;;;CAIC,GACD,SAASe,eAAeH,OAAgC,QAAQ,EAAEC,GAAW;IAC3E,MAAMc,cAAcd,QAAQ,QAAQQ,aAAaC,GAAG,GAAGD,aAAaK,GAAG;IACvE,IAAId,SAAS,SAAS;QACpB,OAAOe,YAAYJ,KAAK;IAC1B;IACA,IAAIX,SAAS,SAAS;QACpB,OAAOe,YAAYF,KAAK;IAC1B;IACA,OAAOE,YAAYH,MAAM;AAC3B"}

package/lib/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js

@@ -0,0 +1,23 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const breadcrumbDividerClassNames = {
+  root: 'fui-BreadcrumbDivider'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw"
+  }
+}, {
+  d: [".f22iagw{display:flex;}"]
+});
+/**
+ * Apply styling to the BreadcrumbDivider slots based on the state
+ */
+export const useBreadcrumbDividerStyles_unstable = state => {
+  const styles = useStyles();
+  state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles.root, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useBreadcrumbDividerStyles.styles.js.map

package/lib/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","breadcrumbDividerClassNames","root","useStyles","mc9l5x","d","useBreadcrumbDividerStyles_unstable","state","styles","className"],"sources":["useBreadcrumbDividerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const breadcrumbDividerClassNames = {\n    root: 'fui-BreadcrumbDivider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex'\n    }\n});\n/**\n * Apply styling to the BreadcrumbDivider slots based on the state\n */ export const useBreadcrumbDividerStyles_unstable = (state)=>{\n    const styles = useStyles();\n    state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGL,SAAS,CAAC,CAAC;EAC1BI,KAAK,CAACL,IAAI,CAACO,SAAS,GAAGT,YAAY,CAACC,2BAA2B,CAACC,IAAI,EAAEM,MAAM,CAACN,IAAI,EAAEK,KAAK,CAACL,IAAI,CAACO,SAAS,CAAC;EACxG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/components/BreadcrumbItem/BreadcrumbItem.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useBreadcrumbItem_unstable } from './useBreadcrumbItem';
+import { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';
+import { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
+ * It can be used as a non-interactive item.
+ */ export const BreadcrumbItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useBreadcrumbItem_unstable(props, ref);
+    useBreadcrumbItemStyles_unstable(state);
+    useCustomStyleHook_unstable('useBreadcrumbItemStyles_unstable')(state);
+    return renderBreadcrumbItem_unstable(state);
+});
+BreadcrumbItem.displayName = 'BreadcrumbItem';

package/lib/components/BreadcrumbItem/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useBreadcrumbItem_unstable } from './useBreadcrumbItem';\nimport { renderBreadcrumbItem_unstable } from './renderBreadcrumbItem';\nimport { useBreadcrumbItemStyles_unstable } from './useBreadcrumbItemStyles.styles';\nimport type { BreadcrumbItemProps } from './BreadcrumbItem.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.\n * It can be used as a non-interactive item.\n */\nexport const BreadcrumbItem: ForwardRefComponent<BreadcrumbItemProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumbItem_unstable(props, ref);\n\n  useBreadcrumbItemStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbItemStyles_unstable')(state);\n\n  return renderBreadcrumbItem_unstable(state);\n});\n\nBreadcrumbItem.displayName = 'BreadcrumbItem';\n"],"names":["React","useBreadcrumbItem_unstable","renderBreadcrumbItem_unstable","useBreadcrumbItemStyles_unstable","useCustomStyleHook_unstable","BreadcrumbItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAGpF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQR,2BAA2BM,OAAOC;IAEhDL,iCAAiCM;IACjCL,4BAA4B,oCAAoCK;IAEhE,OAAOP,8BAA8BO;AACvC,GAAG;AAEHJ,eAAeK,WAAW,GAAG"}

package/lib/components/BreadcrumbItem/BreadcrumbItem.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/BreadcrumbItem/BreadcrumbItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbItem.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbProps } from '../Breadcrumb';\n\nexport type BreadcrumbItemSlots = {\n  root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbItem Props\n */\nexport type BreadcrumbItemProps = ComponentProps<BreadcrumbItemSlots> & Pick<BreadcrumbProps, 'size'>;\n\n/**\n * State used in rendering BreadcrumbItem\n */\nexport type BreadcrumbItemState = ComponentState<BreadcrumbItemSlots> & Required<Pick<BreadcrumbItemProps, 'size'>>;\n"],"names":[],"mappings":"AAAA,WAeoH"}

package/lib/components/BreadcrumbItem/index.js

@@ -0,0 +1,5 @@
+export * from './BreadcrumbItem';
+export * from './BreadcrumbItem.types';
+export * from './renderBreadcrumbItem';
+export * from './useBreadcrumbItem';
+export * from './useBreadcrumbItemStyles.styles';

package/lib/components/BreadcrumbItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './BreadcrumbItem';\nexport * from './BreadcrumbItem.types';\nexport * from './renderBreadcrumbItem';\nexport * from './useBreadcrumbItem';\nexport * from './useBreadcrumbItemStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC"}

package/lib/components/BreadcrumbItem/renderBreadcrumbItem.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of BreadcrumbItem
+ */ export const renderBreadcrumbItem_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: state.root.children
+    });
+};

package/lib/components/BreadcrumbItem/renderBreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderBreadcrumbItem.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { BreadcrumbItemState, BreadcrumbItemSlots } from './BreadcrumbItem.types';\n\n/**\n * Render the final JSX of BreadcrumbItem\n */\nexport const renderBreadcrumbItem_unstable = (state: BreadcrumbItemState) => {\n  assertSlots<BreadcrumbItemSlots>(state);\n\n  return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderBreadcrumbItem_unstable","state","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5CF,YAAiCE;IAEjC,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

package/lib/components/BreadcrumbItem/useBreadcrumbItem.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
+/**
+ * Create the state required to render BreadcrumbItem.
+ *
+ * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,
+ * before being passed to renderBreadcrumbItem_unstable.
+ *
+ * @param props - props from this instance of BreadcrumbItem
+ * @param ref - reference to root HTMLElement of BreadcrumbItem
+ */ export const useBreadcrumbItem_unstable = (props, ref)=>{
+    const { size } = useBreadcrumbContext_unstable();
+    return {
+        components: {
+            root: 'li'
+        },
+        root: slot.always(getIntrinsicElementProps('li', {
+            ref,
+            ...props
+        }), {
+            elementType: 'li'
+        }),
+        size
+    };
+};

package/lib/components/BreadcrumbItem/useBreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useBreadcrumbItem.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbItemProps, BreadcrumbItemState } from './BreadcrumbItem.types';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\n\n/**\n * Create the state required to render BreadcrumbItem.\n *\n * The returned state can be modified with hooks such as useBreadcrumbItemStyles_unstable,\n * before being passed to renderBreadcrumbItem_unstable.\n *\n * @param props - props from this instance of BreadcrumbItem\n * @param ref - reference to root HTMLElement of BreadcrumbItem\n */\nexport const useBreadcrumbItem_unstable = (\n  props: BreadcrumbItemProps,\n  ref: React.Ref<HTMLLIElement>,\n): BreadcrumbItemState => {\n  const { size } = useBreadcrumbContext_unstable();\n\n  return {\n    components: { root: 'li' },\n    root: slot.always(\n      getIntrinsicElementProps('li', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'li' },\n    ),\n    size,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBreadcrumbContext_unstable","useBreadcrumbItem_unstable","props","ref","size","components","root","always","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,6BAA6B,QAAQ,kCAAkC;AAEhF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGJ;IAEjB,OAAO;QACLK,YAAY;YAAEC,MAAM;QAAK;QACzBA,MAAMP,KAAKQ,MAAM,CACfT,yBAAyB,MAAM;YAC7BK;YACA,GAAGD,KAAK;QACV,IACA;YAAEM,aAAa;QAAK;QAEtBJ;IACF;AACF,EAAE"}

package/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.js

@@ -0,0 +1,15 @@
+import { __resetStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const breadcrumbItemClassNames = {
+  root: 'fui-BreadcrumbItem'
+};
+const useBreadcrumbItemResetStyles = /*#__PURE__*/__resetStyles("r1tl60rs", null, [".r1tl60rs{display:flex;align-items:center;color:var(--colorNeutralForeground2);box-sizing:border-box;text-wrap:nowrap;}"]);
+/**
+ * Apply styling to the BreadcrumbItem slots based on the state
+ */
+export const useBreadcrumbItemStyles_unstable = state => {
+  const resetStyles = useBreadcrumbItemResetStyles();
+  state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);
+  return state;
+};
+//# sourceMappingURL=useBreadcrumbItemStyles.styles.js.map

package/lib/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","breadcrumbItemClassNames","root","useBreadcrumbItemResetStyles","useBreadcrumbItemStyles_unstable","state","resetStyles","className"],"sources":["useBreadcrumbItemStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const breadcrumbItemClassNames = {\n    root: 'fui-BreadcrumbItem'\n};\nconst useBreadcrumbItemResetStyles = makeResetStyles({\n    display: 'flex',\n    alignItems: 'center',\n    color: tokens.colorNeutralForeground2,\n    boxSizing: 'border-box',\n    textWrap: 'nowrap'\n});\n/**\n * Apply styling to the BreadcrumbItem slots based on the state\n */ export const useBreadcrumbItemStyles_unstable = (state)=>{\n    const resetStyles = useBreadcrumbItemResetStyles();\n    state.root.className = mergeClasses(breadcrumbItemClassNames.root, resetStyles, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,4BAA4B,gBAAGL,aAAA,8IAMpC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,WAAW,GAAGH,4BAA4B,CAAC,CAAC;EAClDE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGR,YAAY,CAACE,wBAAwB,CAACC,IAAI,EAAEI,WAAW,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EACrG,OAAOF,KAAK;AAChB,CAAC"}

package/lib/index.js

@@ -0,0 +1,6 @@
+export { Breadcrumb, renderBreadcrumb_unstable, useBreadcrumb_unstable, useBreadcrumbStyles_unstable, breadcrumbClassNames } from './Breadcrumb';
+export { BreadcrumbDivider, breadcrumbDividerClassNames, renderBreadcrumbDivider_unstable, useBreadcrumbDividerStyles_unstable, useBreadcrumbDivider_unstable } from './BreadcrumbDivider';
+export { BreadcrumbItem, breadcrumbItemClassNames, renderBreadcrumbItem_unstable, useBreadcrumbItemStyles_unstable, useBreadcrumbItem_unstable } from './BreadcrumbItem';
+export { partitionBreadcrumbItems, truncateBreadcrumbLongName, truncateBreadcrumLongTooltip, isTruncatableBreadcrumbContent } from './utils/index';
+export { BreadcrumbButton, breadcrumbButtonClassNames, renderBreadcrumbButton_unstable, useBreadcrumbButtonStyles_unstable, useBreadcrumbButton_unstable } from './BreadcrumbButton';
+export { BreadcrumbProvider, useBreadcrumbContext_unstable } from './Breadcrumb';

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Breadcrumb,\n  renderBreadcrumb_unstable,\n  useBreadcrumb_unstable,\n  useBreadcrumbStyles_unstable,\n  breadcrumbClassNames,\n} from './Breadcrumb';\nexport type { BreadcrumbSlots, BreadcrumbProps, BreadcrumbState } from './Breadcrumb';\nexport {\n  BreadcrumbDivider,\n  breadcrumbDividerClassNames,\n  renderBreadcrumbDivider_unstable,\n  useBreadcrumbDividerStyles_unstable,\n  useBreadcrumbDivider_unstable,\n} from './BreadcrumbDivider';\nexport type { BreadcrumbDividerProps, BreadcrumbDividerSlots, BreadcrumbDividerState } from './BreadcrumbDivider';\nexport {\n  BreadcrumbItem,\n  breadcrumbItemClassNames,\n  renderBreadcrumbItem_unstable,\n  useBreadcrumbItemStyles_unstable,\n  useBreadcrumbItem_unstable,\n} from './BreadcrumbItem';\nexport type { BreadcrumbItemProps, BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem';\nexport {\n  partitionBreadcrumbItems,\n  truncateBreadcrumbLongName,\n  truncateBreadcrumLongTooltip,\n  isTruncatableBreadcrumbContent,\n} from './utils/index';\nexport type { PartitionBreadcrumbItemsOptions, PartitionBreadcrumbItems } from './utils/index';\nexport {\n  BreadcrumbButton,\n  breadcrumbButtonClassNames,\n  renderBreadcrumbButton_unstable,\n  useBreadcrumbButtonStyles_unstable,\n  useBreadcrumbButton_unstable,\n} from './BreadcrumbButton';\nexport type { BreadcrumbButtonProps, BreadcrumbButtonSlots, BreadcrumbButtonState } from './BreadcrumbButton';\nexport { BreadcrumbProvider, useBreadcrumbContext_unstable } from './Breadcrumb';\nexport type { BreadcrumbContextValues } from './Breadcrumb';\n"],"names":["Breadcrumb","renderBreadcrumb_unstable","useBreadcrumb_unstable","useBreadcrumbStyles_unstable","breadcrumbClassNames","BreadcrumbDivider","breadcrumbDividerClassNames","renderBreadcrumbDivider_unstable","useBreadcrumbDividerStyles_unstable","useBreadcrumbDivider_unstable","BreadcrumbItem","breadcrumbItemClassNames","renderBreadcrumbItem_unstable","useBreadcrumbItemStyles_unstable","useBreadcrumbItem_unstable","partitionBreadcrumbItems","truncateBreadcrumbLongName","truncateBreadcrumLongTooltip","isTruncatableBreadcrumbContent","BreadcrumbButton","breadcrumbButtonClassNames","renderBreadcrumbButton_unstable","useBreadcrumbButtonStyles_unstable","useBreadcrumbButton_unstable","BreadcrumbProvider","useBreadcrumbContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yBAAyB,EACzBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,oBAAoB,QACf,eAAe;AAEtB,SACEC,iBAAiB,EACjBC,2BAA2B,EAC3BC,gCAAgC,EAChCC,mCAAmC,EACnCC,6BAA6B,QACxB,sBAAsB;AAE7B,SACEC,cAAc,EACdC,wBAAwB,EACxBC,6BAA6B,EAC7BC,gCAAgC,EAChCC,0BAA0B,QACrB,mBAAmB;AAE1B,SACEC,wBAAwB,EACxBC,0BAA0B,EAC1BC,4BAA4B,EAC5BC,8BAA8B,QACzB,gBAAgB;AAEvB,SACEC,gBAAgB,EAChBC,0BAA0B,EAC1BC,+BAA+B,EAC/BC,kCAAkC,EAClCC,4BAA4B,QACvB,qBAAqB;AAE5B,SAASC,kBAAkB,EAAEC,6BAA6B,QAAQ,eAAe"}

package/lib/utils/index.js

@@ -0,0 +1,2 @@
+export { partitionBreadcrumbItems } from './partitionBreadcrumbItems';
+export { truncateBreadcrumbLongName, truncateBreadcrumLongTooltip, isTruncatableBreadcrumbContent } from './truncateBreadcrumb';

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { partitionBreadcrumbItems } from './partitionBreadcrumbItems';\nexport type { PartitionBreadcrumbItems, PartitionBreadcrumbItemsOptions } from './partitionBreadcrumbItems';\nexport {\n  truncateBreadcrumbLongName,\n  truncateBreadcrumLongTooltip,\n  isTruncatableBreadcrumbContent,\n} from './truncateBreadcrumb';\n"],"names":["partitionBreadcrumbItems","truncateBreadcrumbLongName","truncateBreadcrumLongTooltip","isTruncatableBreadcrumbContent"],"mappings":"AAAA,SAASA,wBAAwB,QAAQ,6BAA6B;AAEtE,SACEC,0BAA0B,EAC1BC,4BAA4B,EAC5BC,8BAA8B,QACzB,uBAAuB"}

package/lib/utils/partitionBreadcrumbItems.js

@@ -0,0 +1,35 @@
+const DEFAULT_OVERFLOW_INDEX = 1;
+const DEFAULT_MAX_DISPLAYED_ITEMS = 6;
+/**
+ * Get the displayed items and overflowing items based on the array of BreadcrumbItems needed for Breadcrumb.
+ *
+ * @param options - Configure the partition options
+ *
+ * @returns Three arrays split into displayed items and overflow items based on maxDisplayedItems.
+ */ export const partitionBreadcrumbItems = (options)=>{
+    let startDisplayedItems;
+    let overflowItems;
+    let endDisplayedItems;
+    const { items = [] } = options;
+    const itemsCount = items.length;
+    const maxDisplayedItems = getMaxDisplayedItems(options.maxDisplayedItems);
+    var _options_overflowIndex;
+    let overflowIndex = (_options_overflowIndex = options.overflowIndex) !== null && _options_overflowIndex !== void 0 ? _options_overflowIndex : DEFAULT_OVERFLOW_INDEX;
+    startDisplayedItems = items.slice(0, overflowIndex);
+    const numberItemsToHide = itemsCount - maxDisplayedItems;
+    if (numberItemsToHide > 0) {
+        overflowIndex = overflowIndex === maxDisplayedItems ? overflowIndex - 1 : overflowIndex;
+        const menuLastItemIdx = overflowIndex + numberItemsToHide;
+        startDisplayedItems = startDisplayedItems.slice(0, overflowIndex);
+        overflowItems = items.slice(overflowIndex, menuLastItemIdx);
+        endDisplayedItems = items.slice(menuLastItemIdx, itemsCount);
+    }
+    return {
+        startDisplayedItems,
+        overflowItems,
+        endDisplayedItems
+    };
+};
+function getMaxDisplayedItems(maxDisplayedItems) {
+    return maxDisplayedItems && maxDisplayedItems >= 0 ? maxDisplayedItems : DEFAULT_MAX_DISPLAYED_ITEMS;
+}

package/lib/utils/partitionBreadcrumbItems.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["partitionBreadcrumbItems.ts"],"sourcesContent":["const DEFAULT_OVERFLOW_INDEX = 1;\nconst DEFAULT_MAX_DISPLAYED_ITEMS = 6;\n\nexport type PartitionBreadcrumbItemsOptions<T> = {\n  items: readonly T[];\n  maxDisplayedItems?: number;\n  overflowIndex?: number;\n};\n\nexport type PartitionBreadcrumbItems<T> = {\n  startDisplayedItems: readonly T[];\n  overflowItems?: readonly T[];\n  endDisplayedItems?: readonly T[];\n};\n\n/**\n * Get the displayed items and overflowing items based on the array of BreadcrumbItems needed for Breadcrumb.\n *\n * @param options - Configure the partition options\n *\n * @returns Three arrays split into displayed items and overflow items based on maxDisplayedItems.\n */\nexport const partitionBreadcrumbItems = <T>(\n  options: PartitionBreadcrumbItemsOptions<T>,\n): PartitionBreadcrumbItems<T> => {\n  let startDisplayedItems;\n  let overflowItems;\n  let endDisplayedItems;\n\n  const { items = [] } = options;\n  const itemsCount = items.length;\n  const maxDisplayedItems = getMaxDisplayedItems(options.maxDisplayedItems);\n  let overflowIndex = options.overflowIndex ?? DEFAULT_OVERFLOW_INDEX;\n  startDisplayedItems = items.slice(0, overflowIndex);\n\n  const numberItemsToHide = itemsCount - maxDisplayedItems;\n\n  if (numberItemsToHide > 0) {\n    overflowIndex = overflowIndex === maxDisplayedItems ? overflowIndex - 1 : overflowIndex;\n    const menuLastItemIdx = overflowIndex + numberItemsToHide;\n\n    startDisplayedItems = startDisplayedItems.slice(0, overflowIndex);\n    overflowItems = items.slice(overflowIndex, menuLastItemIdx);\n    endDisplayedItems = items.slice(menuLastItemIdx, itemsCount);\n  }\n\n  return {\n    startDisplayedItems,\n    overflowItems,\n    endDisplayedItems,\n  };\n};\n\nfunction getMaxDisplayedItems(maxDisplayedItems: number | undefined) {\n  return maxDisplayedItems && maxDisplayedItems >= 0 ? maxDisplayedItems : DEFAULT_MAX_DISPLAYED_ITEMS;\n}\n"],"names":["DEFAULT_OVERFLOW_INDEX","DEFAULT_MAX_DISPLAYED_ITEMS","partitionBreadcrumbItems","options","startDisplayedItems","overflowItems","endDisplayedItems","items","itemsCount","length","maxDisplayedItems","getMaxDisplayedItems","overflowIndex","slice","numberItemsToHide","menuLastItemIdx"],"mappings":"AAAA,MAAMA,yBAAyB;AAC/B,MAAMC,8BAA8B;AAcpC;;;;;;CAMC,GACD,OAAO,MAAMC,2BAA2B,CACtCC;IAEA,IAAIC;IACJ,IAAIC;IACJ,IAAIC;IAEJ,MAAM,EAAEC,QAAQ,EAAE,EAAE,GAAGJ;IACvB,MAAMK,aAAaD,MAAME,MAAM;IAC/B,MAAMC,oBAAoBC,qBAAqBR,QAAQO,iBAAiB;QACpDP;IAApB,IAAIS,gBAAgBT,CAAAA,yBAAAA,QAAQS,aAAa,cAArBT,oCAAAA,yBAAyBH;IAC7CI,sBAAsBG,MAAMM,KAAK,CAAC,GAAGD;IAErC,MAAME,oBAAoBN,aAAaE;IAEvC,IAAII,oBAAoB,GAAG;QACzBF,gBAAgBA,kBAAkBF,oBAAoBE,gBAAgB,IAAIA;QAC1E,MAAMG,kBAAkBH,gBAAgBE;QAExCV,sBAAsBA,oBAAoBS,KAAK,CAAC,GAAGD;QACnDP,gBAAgBE,MAAMM,KAAK,CAACD,eAAeG;QAC3CT,oBAAoBC,MAAMM,KAAK,CAACE,iBAAiBP;IACnD;IAEA,OAAO;QACLJ;QACAC;QACAC;IACF;AACF,EAAE;AAEF,SAASK,qBAAqBD,iBAAqC;IACjE,OAAOA,qBAAqBA,qBAAqB,IAAIA,oBAAoBT;AAC3E"}

package/lib/utils/truncateBreadcrumb.js

@@ -0,0 +1,16 @@
+const MAX_NAME_LENGTH = 30;
+const MAX_TOOLTIP_LENGTH = 80;
+const truncateBreadcrumb = (content, maxLength)=>{
+    return isTruncatableBreadcrumbContent(content, maxLength) ? content.trim().slice(0, maxLength).concat('...') : content;
+};
+export const isTruncatableBreadcrumbContent = (content, maxLength)=>{
+    return content.length > maxLength;
+};
+export const truncateBreadcrumbLongName = (content, maxLength)=>{
+    const truncateLength = maxLength || MAX_NAME_LENGTH;
+    return truncateBreadcrumb(content, truncateLength);
+};
+export const truncateBreadcrumLongTooltip = (content, maxLength)=>{
+    const truncateLength = maxLength || MAX_TOOLTIP_LENGTH;
+    return truncateBreadcrumb(content, truncateLength);
+};

package/lib/utils/truncateBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["truncateBreadcrumb.ts"],"sourcesContent":["const MAX_NAME_LENGTH = 30;\nconst MAX_TOOLTIP_LENGTH = 80;\n\nconst truncateBreadcrumb = (content: string, maxLength: number): string => {\n  return isTruncatableBreadcrumbContent(content, maxLength)\n    ? content.trim().slice(0, maxLength).concat('...')\n    : content;\n};\n\nexport const isTruncatableBreadcrumbContent = (content: string, maxLength: number) => {\n  return content.length > maxLength;\n};\n\nexport const truncateBreadcrumbLongName = (content: string, maxLength?: number): string => {\n  const truncateLength = maxLength || MAX_NAME_LENGTH;\n  return truncateBreadcrumb(content, truncateLength);\n};\n\nexport const truncateBreadcrumLongTooltip = (content: string, maxLength?: number): string => {\n  const truncateLength = maxLength || MAX_TOOLTIP_LENGTH;\n  return truncateBreadcrumb(content, truncateLength);\n};\n"],"names":["MAX_NAME_LENGTH","MAX_TOOLTIP_LENGTH","truncateBreadcrumb","content","maxLength","isTruncatableBreadcrumbContent","trim","slice","concat","length","truncateBreadcrumbLongName","truncateLength","truncateBreadcrumLongTooltip"],"mappings":"AAAA,MAAMA,kBAAkB;AACxB,MAAMC,qBAAqB;AAE3B,MAAMC,qBAAqB,CAACC,SAAiBC;IAC3C,OAAOC,+BAA+BF,SAASC,aAC3CD,QAAQG,IAAI,GAAGC,KAAK,CAAC,GAAGH,WAAWI,MAAM,CAAC,SAC1CL;AACN;AAEA,OAAO,MAAME,iCAAiC,CAACF,SAAiBC;IAC9D,OAAOD,QAAQM,MAAM,GAAGL;AAC1B,EAAE;AAEF,OAAO,MAAMM,6BAA6B,CAACP,SAAiBC;IAC1D,MAAMO,iBAAiBP,aAAaJ;IACpC,OAAOE,mBAAmBC,SAASQ;AACrC,EAAE;AAEF,OAAO,MAAMC,+BAA+B,CAACT,SAAiBC;IAC5D,MAAMO,iBAAiBP,aAAaH;IACpC,OAAOC,mBAAmBC,SAASQ;AACrC,EAAE"}

package/lib-commonjs/Breadcrumb.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/Breadcrumb/index"), exports);

package/lib-commonjs/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["Breadcrumb.js"],"sourcesContent":["export * from './components/Breadcrumb/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/BreadcrumbButton.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/BreadcrumbButton/index"), exports);

package/lib-commonjs/BreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbButton.js"],"sourcesContent":["export * from './components/BreadcrumbButton/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/BreadcrumbDivider.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/BreadcrumbDivider/index"), exports);

package/lib-commonjs/BreadcrumbDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbDivider.js"],"sourcesContent":["export * from './components/BreadcrumbDivider/index';\n"],"names":[],"mappings":";;;;;uBAAc"}

package/lib-commonjs/BreadcrumbItem.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _export_star = require("@swc/helpers/_/_export_star");
+_export_star._(require("./components/BreadcrumbItem/index"), exports);

package/lib-commonjs/BreadcrumbItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["BreadcrumbItem.js"],"sourcesContent":["export * from './components/BreadcrumbItem/index';\n"],"names":[],"mappings":";;;;;uBAAc"}