'use client'; import { __styles, __resetStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; export const toastTitleClassNames = { root: 'fui-ToastTitle', media: 'fui-ToastTitle__media', action: 'fui-ToastTitle__action' }; const useRootBaseClassName = /*#__PURE__*/__resetStyles("rdjap1e", null, [".rdjap1e{display:flex;grid-column-end:3;color:var(--colorNeutralForeground1);word-break:break-word;}"]); const useMediaBaseClassName = /*#__PURE__*/__resetStyles("r8x5mrd", "r1soj19y", [".r8x5mrd{display:flex;padding-top:2px;grid-column-end:2;padding-right:8px;font-size:16px;color:var(--colorNeutralForeground1);}", ".r1soj19y{display:flex;padding-top:2px;grid-column-end:2;padding-left:8px;font-size:16px;color:var(--colorNeutralForeground1);}"]); const useActionBaseClassName = /*#__PURE__*/__resetStyles("r2j19ip", "rjfozdo", [".r2j19ip{display:flex;align-items:start;padding-left:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}", ".rjfozdo{display:flex;align-items:start;padding-right:12px;grid-column-end:-1;color:var(--colorBrandForeground1);}"]); const useInvertedStyles = /*#__PURE__*/__styles({ root: { sj55zd: "f1w7i9ko" }, action: { sj55zd: "f1qz2gb0" }, media: { sj55zd: "fqpbvvt" } }, { d: [".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".fqpbvvt{color:var(--colorNeutralForegroundInverted);}"] }); const useIntentIconStyles = /*#__PURE__*/__styles({ success: { sj55zd: "f36rra6" }, error: { sj55zd: "f1ca9wz" }, warning: { sj55zd: "f13isgzr" }, info: { sj55zd: "fkfq4zb" } }, { d: [".f36rra6{color:var(--colorStatusSuccessForeground1);}", ".f1ca9wz{color:var(--colorStatusDangerForeground1);}", ".f13isgzr{color:var(--colorStatusWarningForeground1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}"] }); const useIntentIconStylesInverted = /*#__PURE__*/__styles({ success: { sj55zd: "ff3wk4x" }, error: { sj55zd: "fbq2gqr" }, warning: { sj55zd: "fx6hq1t" }, info: { sj55zd: "f1w7i9ko" } }, { d: [".ff3wk4x{color:var(--colorStatusSuccessForegroundInverted);}", ".fbq2gqr{color:var(--colorStatusDangerForegroundInverted);}", ".fx6hq1t{color:var(--colorStatusWarningForegroundInverted);}", ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"] }); /** * Apply styling to the ToastTitle slots based on the state */ export const useToastTitleStyles_unstable = state => { 'use no memo'; const rootBaseClassName = useRootBaseClassName(); const actionBaseClassName = useActionBaseClassName(); const mediaBaseClassName = useMediaBaseClassName(); const intentIconStyles = useIntentIconStyles(); const intentIconStylesInverted = useIntentIconStylesInverted(); const { intent } = state; const invertedStyles = useInvertedStyles(); state.root.className = mergeClasses(toastTitleClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className); if (state.media) { state.media.className = mergeClasses(toastTitleClassNames.media, mediaBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.media, intent && intentIconStyles[intent], intent && state.backgroundAppearance === 'inverted' && intentIconStylesInverted[intent], state.media.className); } if (state.action) { state.action.className = mergeClasses(toastTitleClassNames.action, actionBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.action, state.action.className); } return state; };