@fluentui/react-alert 9.0.0-beta.13 → 9.0.0-beta.131

package/lib-commonjs/components/Alert/useAlertStyles.styles.js

@@ -0,0 +1,258 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    alertClassNames: function() {
+        return alertClassNames;
+    },
+    useAlertStyles_unstable: function() {
+        return useAlertStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const alertClassNames = {
+    root: 'fui-Alert',
+    icon: 'fui-Alert__icon',
+    action: 'fui-Alert__action',
+    avatar: 'fui-Alert__avatar'
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Bt984gj: "f122n59",
+        sshi5w: "f5pgtk9",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1oic3e7",
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ff3glw6",
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f9ggezi",
+        E5pizo: "fz58gqq",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "fl43uef",
+        sj55zd: "f19n0e5",
+        De3pzq: "fxugw4r"
+    },
+    inverted: {
+        sj55zd: "f1w7i9ko",
+        De3pzq: "f5pduvr"
+    },
+    icon: {
+        Bqenvij: "fd461yt",
+        Be2twd7: "f4ybsrx",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: [
+            "fhivll6",
+            "f1cgepy8"
+        ]
+    },
+    avatar: {
+        jrapky: 0,
+        Frg6f3: 0,
+        t21cq0: 0,
+        B6of3ja: 0,
+        B74szlk: [
+            "fxal17o",
+            "ftghr3s"
+        ]
+    },
+    action: {
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f4jnnbt",
+        Bf4jedk: "fy77jfu",
+        Frg6f3: [
+            "fcgxt0o",
+            "f1ujusj6"
+        ],
+        sj55zd: "f16muhyy"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f122n59{align-items:center;}",
+        ".f5pgtk9{min-height:44px;}",
+        [
+            ".f1oic3e7{padding:0 12px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".ff3glw6{border-radius:4px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f9ggezi{border:1px solid var(--colorTransparentStroke);}",
+            {
+                p: -2
+            }
+        ],
+        ".fz58gqq{box-shadow:var(--shadow8);}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".fxugw4r{background-color:var(--colorNeutralBackground1);}",
+        ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}",
+        ".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}",
+        ".fd461yt{height:16px;}",
+        ".f4ybsrx{font-size:16px;}",
+        [
+            ".fhivll6{padding:0 8px 0 0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1cgepy8{padding:0 0 0 8px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fxal17o{margin:0 8px 0 0;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".ftghr3s{margin:0 0 0 8px;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f4jnnbt{padding:5px 10px;}",
+            {
+                p: -1
+            }
+        ],
+        ".fy77jfu{min-width:0;}",
+        ".fcgxt0o{margin-left:auto;}",
+        ".f1ujusj6{margin-right:auto;}",
+        ".f16muhyy{color:var(--colorBrandForeground1);}"
+    ]
+});
+const useIntentIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    success: {
+        sj55zd: "f1m7fhi8"
+    },
+    error: {
+        sj55zd: "f1whyuy6"
+    },
+    warning: {
+        sj55zd: "fpti2h4"
+    },
+    info: {
+        sj55zd: "fkfq4zb"
+    }
+}, {
+    d: [
+        ".f1m7fhi8{color:var(--colorPaletteGreenForeground3);}",
+        ".f1whyuy6{color:var(--colorPaletteRedForeground3);}",
+        ".fpti2h4{color:var(--colorPaletteYellowForeground2);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}"
+    ]
+});
+const useIntentIconStylesInverted = /*#__PURE__*/ (0, _react.__styles)({
+    success: {
+        sj55zd: "f1pvjcpr"
+    },
+    error: {
+        sj55zd: "fcrp5ll"
+    },
+    warning: {
+        sj55zd: "f1r8f1cl"
+    },
+    info: {
+        sj55zd: "f1w7i9ko"
+    }
+}, {
+    d: [
+        ".f1pvjcpr{color:var(--colorPaletteGreenForegroundInverted);}",
+        ".fcrp5ll{color:var(--colorPaletteRedForegroundInverted);}",
+        ".f1r8f1cl{color:var(--colorPaletteYellowForegroundInverted);}",
+        ".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}"
+    ]
+});
+const useActionButtonColorInverted = /*#__PURE__*/ (0, _react.__styles)({
+    action: {
+        sj55zd: "f1qz2gb0",
+        B8q5s1w: "fa5e339",
+        Bci5o5g: [
+            "fk4svks",
+            "fqzoz0o"
+        ],
+        n8qw10: "fw8q0i0",
+        Bdrgwmp: [
+            "fqzoz0o",
+            "fk4svks"
+        ],
+        Bfpq7zp: "f1dlk4fq"
+    }
+}, {
+    d: [
+        ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}",
+        ".fa5e339[data-fui-focus-visible]{border-top-color:var(--colorTransparentStrokeInteractive);}",
+        ".fk4svks[data-fui-focus-visible]{border-right-color:var(--colorTransparentStrokeInteractive);}",
+        ".fqzoz0o[data-fui-focus-visible]{border-left-color:var(--colorTransparentStrokeInteractive);}",
+        ".fw8q0i0[data-fui-focus-visible]{border-bottom-color:var(--colorTransparentStrokeInteractive);}",
+        ".f1dlk4fq[data-fui-focus-visible]{outline-color:var(--colorNeutralBackground5Pressed);}"
+    ]
+});
+const useAlertStyles_unstable = (state)=>{
+    const inverted = state.appearance === 'inverted';
+    const styles = useStyles();
+    const intentIconStylesPrimary = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const actionStylesInverted = useActionButtonColorInverted();
+    // eslint-disable-next-line react-compiler/react-compiler
+    state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
+    }
+    if (state.avatar) {
+        state.avatar.className = (0, _react.mergeClasses)(alertClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.action) {
+        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+        state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Alert/useAlertStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAlertStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames = {\n    root: 'fui-Alert',\n    icon: 'fui-Alert__icon',\n    action: 'fui-Alert__action',\n    avatar: 'fui-Alert__avatar'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center',\n        minHeight: '44px',\n        padding: '0 12px',\n        borderRadius: '4px',\n        border: `1px solid ${tokens.colorTransparentStroke}`,\n        boxShadow: tokens.shadow8,\n        fontSize: tokens.fontSizeBase300,\n        fontWeight: tokens.fontWeightSemibold,\n        color: tokens.colorNeutralForeground1,\n        backgroundColor: tokens.colorNeutralBackground1\n    },\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    },\n    icon: {\n        height: '16px',\n        fontSize: '16px',\n        padding: '0 8px 0 0'\n    },\n    avatar: {\n        margin: '0 8px 0 0'\n    },\n    action: {\n        padding: '5px 10px',\n        minWidth: 0,\n        marginLeft: 'auto',\n        color: tokens.colorBrandForeground1\n    }\n});\nconst useIntentIconStyles = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForeground3\n    },\n    error: {\n        color: tokens.colorPaletteRedForeground3\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForeground2\n    },\n    info: {\n        color: tokens.colorNeutralForeground2\n    }\n});\nconst useIntentIconStylesInverted = makeStyles({\n    success: {\n        color: tokens.colorPaletteGreenForegroundInverted\n    },\n    error: {\n        color: tokens.colorPaletteRedForegroundInverted\n    },\n    warning: {\n        color: tokens.colorPaletteYellowForegroundInverted\n    },\n    info: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\nconst useActionButtonColorInverted = makeStyles({\n    action: {\n        color: tokens.colorBrandForegroundInverted,\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n            outlineColor: tokens.colorNeutralBackground5Pressed\n        }, {\n            enableOutline: true\n        })\n    }\n});\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */ // eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state)=>{\n    const inverted = state.appearance === 'inverted';\n    const styles = useStyles();\n    const intentIconStylesPrimary = useIntentIconStyles();\n    const intentIconStylesInverted = useIntentIconStylesInverted();\n    const actionStylesInverted = useActionButtonColorInverted();\n    // eslint-disable-next-line react-compiler/react-compiler\n    state.root.className = mergeClasses(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);\n    if (state.icon) {\n        state.icon.className = mergeClasses(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);\n    }\n    if (state.avatar) {\n        state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n    }\n    if (state.action) {\n        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n        state.action.className = mergeClasses(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);\n    }\n    return state;\n};\n"],"names":["tokens","__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","mc9l5x","Bt984gj","sshi5w","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","E5pizo","Be2twd7","Bhrd7zp","sj55zd","De3pzq","inverted","Bqenvij","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","Bf4jedk","d","p","useIntentIconStyles","success","error","warning","info","useIntentIconStylesInverted","useActionButtonColorInverted","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Bfpq7zp","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"mappings":"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"}

package/lib-commonjs/components/Alert/useAlertStyles.styles.raw.js

@@ -0,0 +1,120 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    alertClassNames: function() {
+        return alertClassNames;
+    },
+    useAlertStyles_unstable: function() {
+        return useAlertStyles_unstable;
+    }
+});
+const _reacttheme = require("@fluentui/react-theme");
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const alertClassNames = {
+    root: 'fui-Alert',
+    icon: 'fui-Alert__icon',
+    action: 'fui-Alert__action',
+    avatar: 'fui-Alert__avatar'
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        alignItems: 'center',
+        minHeight: '44px',
+        padding: '0 12px',
+        borderRadius: '4px',
+        border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+        boxShadow: _reacttheme.tokens.shadow8,
+        fontSize: _reacttheme.tokens.fontSizeBase300,
+        fontWeight: _reacttheme.tokens.fontWeightSemibold,
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackground1
+    },
+    inverted: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2,
+        backgroundColor: _reacttheme.tokens.colorNeutralBackgroundInverted
+    },
+    icon: {
+        height: '16px',
+        fontSize: '16px',
+        padding: '0 8px 0 0'
+    },
+    avatar: {
+        margin: '0 8px 0 0'
+    },
+    action: {
+        padding: '5px 10px',
+        minWidth: 0,
+        marginLeft: 'auto',
+        color: _reacttheme.tokens.colorBrandForeground1
+    }
+});
+const useIntentIconStyles = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorPaletteGreenForeground3
+    },
+    error: {
+        color: _reacttheme.tokens.colorPaletteRedForeground3
+    },
+    warning: {
+        color: _reacttheme.tokens.colorPaletteYellowForeground2
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForeground2
+    }
+});
+const useIntentIconStylesInverted = (0, _react.makeStyles)({
+    success: {
+        color: _reacttheme.tokens.colorPaletteGreenForegroundInverted
+    },
+    error: {
+        color: _reacttheme.tokens.colorPaletteRedForegroundInverted
+    },
+    warning: {
+        color: _reacttheme.tokens.colorPaletteYellowForegroundInverted
+    },
+    info: {
+        color: _reacttheme.tokens.colorNeutralForegroundInverted2
+    }
+});
+const useActionButtonColorInverted = (0, _react.makeStyles)({
+    action: {
+        color: _reacttheme.tokens.colorBrandForegroundInverted,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorTransparentStrokeInteractive),
+            outlineColor: _reacttheme.tokens.colorNeutralBackground5Pressed
+        }, {
+            enableOutline: true
+        })
+    }
+});
+const useAlertStyles_unstable = (state)=>{
+    const inverted = state.appearance === 'inverted';
+    const styles = useStyles();
+    const intentIconStylesPrimary = useIntentIconStyles();
+    const intentIconStylesInverted = useIntentIconStylesInverted();
+    const actionStylesInverted = useActionButtonColorInverted();
+    // eslint-disable-next-line react-compiler/react-compiler
+    state.root.className = (0, _react.mergeClasses)(alertClassNames.root, styles.root, inverted && styles.inverted, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(alertClassNames.icon, styles.icon, state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]), state.icon.className);
+    }
+    if (state.avatar) {
+        state.avatar.className = (0, _react.mergeClasses)(alertClassNames.avatar, styles.avatar, state.avatar.className);
+    }
+    if (state.action) {
+        // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last
+        state.action.className = (0, _react.mergeClasses)(alertClassNames.action, styles.action, inverted && actionStylesInverted.action, state.action.className);
+    }
+    return state;
+};

package/lib-commonjs/components/Alert/useAlertStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Alert/useAlertStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { AlertSlots, AlertState } from './Alert.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const alertClassNames: SlotClassNames<AlertSlots> = {\n  root: 'fui-Alert',\n  icon: 'fui-Alert__icon',\n  action: 'fui-Alert__action',\n  avatar: 'fui-Alert__avatar',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    minHeight: '44px',\n    padding: '0 12px',\n    borderRadius: '4px',\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1,\n  },\n  inverted: {\n    color: tokens.colorNeutralForegroundInverted2,\n    backgroundColor: tokens.colorNeutralBackgroundInverted,\n  },\n  icon: {\n    height: '16px',\n    fontSize: '16px',\n    padding: '0 8px 0 0',\n  },\n  avatar: { margin: '0 8px 0 0' },\n  action: {\n    padding: '5px 10px',\n    minWidth: 0,\n    marginLeft: 'auto',\n    color: tokens.colorBrandForeground1,\n  },\n});\n\nconst useIntentIconStyles = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForeground3,\n  },\n  error: {\n    color: tokens.colorPaletteRedForeground3,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForeground2,\n  },\n  info: {\n    color: tokens.colorNeutralForeground2,\n  },\n});\n\nconst useIntentIconStylesInverted = makeStyles({\n  success: {\n    color: tokens.colorPaletteGreenForegroundInverted,\n  },\n  error: {\n    color: tokens.colorPaletteRedForegroundInverted,\n  },\n  warning: {\n    color: tokens.colorPaletteYellowForegroundInverted,\n  },\n  info: {\n    color: tokens.colorNeutralForegroundInverted2,\n  },\n});\n\nconst useActionButtonColorInverted = makeStyles({\n  action: {\n    color: tokens.colorBrandForegroundInverted,\n    ...createCustomFocusIndicatorStyle(\n      {\n        ...shorthands.borderColor(tokens.colorTransparentStrokeInteractive),\n        outlineColor: tokens.colorNeutralBackground5Pressed,\n      },\n      { enableOutline: true },\n    ),\n  },\n});\n\n/**\n * @deprecated please use the Toast or MessageBar component\n * Apply styling to the Alert slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport const useAlertStyles_unstable = (state: AlertState): AlertState => {\n  const inverted = state.appearance === 'inverted';\n  const styles = useStyles();\n  const intentIconStylesPrimary = useIntentIconStyles();\n  const intentIconStylesInverted = useIntentIconStylesInverted();\n  const actionStylesInverted = useActionButtonColorInverted();\n\n  // eslint-disable-next-line react-compiler/react-compiler\n  state.root.className = mergeClasses(\n    alertClassNames.root,\n    styles.root,\n    inverted && styles.inverted,\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(\n      alertClassNames.icon,\n      styles.icon,\n      state.intent && (inverted ? intentIconStylesInverted[state.intent] : intentIconStylesPrimary[state.intent]),\n      state.icon.className,\n    );\n  }\n\n  if (state.avatar) {\n    state.avatar.className = mergeClasses(alertClassNames.avatar, styles.avatar, state.avatar.className);\n  }\n\n  if (state.action) {\n    // Note: inverted && actionStylesInverted.action has the highest piority and must be merged last\n    state.action.className = mergeClasses(\n      alertClassNames.action,\n      styles.action,\n      inverted && actionStylesInverted.action,\n      state.action.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["tokens","makeStyles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","alertClassNames","root","icon","action","avatar","useStyles","display","alignItems","minHeight","padding","borderRadius","border","colorTransparentStroke","boxShadow","shadow8","fontSize","fontSizeBase300","fontWeight","fontWeightSemibold","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","inverted","colorNeutralForegroundInverted2","colorNeutralBackgroundInverted","height","margin","minWidth","marginLeft","colorBrandForeground1","useIntentIconStyles","success","colorPaletteGreenForeground3","error","colorPaletteRedForeground3","warning","colorPaletteYellowForeground2","info","colorNeutralForeground2","useIntentIconStylesInverted","colorPaletteGreenForegroundInverted","colorPaletteRedForegroundInverted","colorPaletteYellowForegroundInverted","useActionButtonColorInverted","colorBrandForegroundInverted","borderColor","colorTransparentStrokeInteractive","outlineColor","colorNeutralBackground5Pressed","enableOutline","useAlertStyles_unstable","state","appearance","styles","intentIconStylesPrimary","intentIconStylesInverted","actionStylesInverted","className","intent"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,40 +1,29 @@
+// eslint-disable-next-line @typescript-eslint/no-deprecated
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useAlert_unstable = exports.useAlertStyles_unstable = exports.renderAlert_unstable = exports.alertClassNames = exports.Alert = void 0;
-
-var Alert_1 = /*#__PURE__*/require("./Alert");
-
-Object.defineProperty(exports, "Alert", {
-  enumerable: true,
-  get: function () {
-    return Alert_1.Alert;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Alert: function() {
+        return _Alert.Alert;
+    },
+    alertClassNames: function() {
+        return _Alert.alertClassNames;
+    },
+    renderAlert_unstable: function() {
+        return _Alert.renderAlert_unstable;
+    },
+    useAlertStyles_unstable: function() {
+        return _Alert.useAlertStyles_unstable;
+    },
+    useAlert_unstable: function() {
+        return _Alert.useAlert_unstable;
+    }
 });
-Object.defineProperty(exports, "alertClassNames", {
-  enumerable: true,
-  get: function () {
-    return Alert_1.alertClassNames;
-  }
-});
-Object.defineProperty(exports, "renderAlert_unstable", {
-  enumerable: true,
-  get: function () {
-    return Alert_1.renderAlert_unstable;
-  }
-});
-Object.defineProperty(exports, "useAlertStyles_unstable", {
-  enumerable: true,
-  get: function () {
-    return Alert_1.useAlertStyles_unstable;
-  }
-});
-Object.defineProperty(exports, "useAlert_unstable", {
-  enumerable: true,
-  get: function () {
-    return Alert_1.useAlert_unstable;
-  }
-});
-//# sourceMappingURL=index.js.map
+const _Alert = require("./Alert");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,OAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,KAAA;EAAK;AAAL,CAAA;AAAO,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,eAAA;EAAe;AAAf,CAAA;AAAiB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport { Alert, alertClassNames, renderAlert_unstable, useAlertStyles_unstable, useAlert_unstable } from './Alert';\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport type { AlertProps, AlertSlots, AlertState } from './Alert';\n"],"names":["Alert","alertClassNames","renderAlert_unstable","useAlertStyles_unstable","useAlert_unstable"],"mappings":"AAAA,4DAA4D;;;;;;;;;;;;;eACnDA,YAAK;;;eAAEC,sBAAe;;;eAAEC,2BAAoB;;;eAAEC,8BAAuB;;;eAAEC,wBAAiB;;;uBAAQ,UAAU"}

package/package.json

@@ -1,50 +1,38 @@
 {
   "name": "@fluentui/react-alert",
-  "version": "9.0.0-beta.13",
+  "version": "9.0.0-beta.131",
   "description": "An alert component to display brief messages",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
-  "typings": "dist/index.d.ts",
+  "typings": "./dist/index.d.ts",
   "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "scripts": {
-    "build": "just-scripts build",
-    "bundle-size": "bundle-size measure",
-    "clean": "just-scripts clean",
-    "code-style": "just-scripts code-style",
-    "just": "just-scripts",
-    "lint": "just-scripts lint",
-    "start": "yarn storybook",
-    "test": "jest --passWithNoTests",
-    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-alert/src && yarn docs",
-    "storybook": "start-storybook",
-    "type-check": "tsc -b tsconfig.json"
-  },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.15",
-    "@fluentui/scripts": "^1.0.0"
+    "@fluentui/react-conformance-griffel": "*",
+    "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-avatar": "^9.2.2",
-    "@fluentui/react-button": "^9.1.4",
-    "@fluentui/react-icons": "^2.0.175",
-    "@fluentui/react-theme": "^9.1.0",
-    "@fluentui/react-utilities": "^9.1.1",
-    "@griffel/react": "^1.4.0",
-    "tslib": "^2.1.0"
+    "@fluentui/react-avatar": "^9.9.13",
+    "@fluentui/react-button": "^9.7.1",
+    "@fluentui/react-icons": "^2.0.239",
+    "@fluentui/react-tabster": "^9.26.11",
+    "@fluentui/react-theme": "^9.2.0",
+    "@fluentui/react-utilities": "^9.26.0",
+    "@fluentui/react-jsx-runtime": "^9.3.4",
+    "@griffel/react": "^1.5.32",
+    "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <18.0.0",
-    "@types/react-dom": ">=16.8.0 <18.0.0",
-    "react": ">=16.8.0 <18.0.0",
-    "react-dom": ">=16.8.0 <18.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [
@@ -52,5 +40,20 @@
       "minor",
       "patch"
     ]
-  }
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "node": "./lib-commonjs/index.js",
+      "import": "./lib/index.js",
+      "require": "./lib-commonjs/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "*.md",
+    "dist/*.d.ts",
+    "lib",
+    "lib-commonjs"
+  ]
 }