Private
Public Access
1
0
Files
power-apps-codeapps-blog-part2/node_modules/@fluentui/react-tabs/lib-commonjs/components/Tab/useTabStyles.styles.js

1282 lines
39 KiB
JavaScript

'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, {
tabClassNames: function() {
return tabClassNames;
},
tabReservedSpaceClassNames: function() {
return tabReservedSpaceClassNames;
},
useTabButtonStyles_unstable: function() {
return useTabButtonStyles_unstable;
},
useTabContentStyles_unstable: function() {
return useTabContentStyles_unstable;
},
useTabIndicatorStyles_unstable: function() {
return useTabIndicatorStyles_unstable;
},
useTabStyles_unstable: function() {
return useTabStyles_unstable;
}
});
const _react = require("@griffel/react");
const _useTabAnimatedIndicatorstyles = require("./useTabAnimatedIndicator.styles");
const tabClassNames = {
root: 'fui-Tab',
icon: 'fui-Tab__icon',
content: 'fui-Tab__content'
};
const tabReservedSpaceClassNames = {
content: 'fui-Tab__content--reserved-space'
};
// These should match the constants defined in @fluentui/react-icons
// This package avoids taking a dependency on the icons package for only the constants.
const iconClassNames = {
filled: 'fui-Icon-filled',
regular: 'fui-Icon-regular'
};
/**
* Styles for the root slot
*/ const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Bt984gj: "f122n59",
mc9l5x: "f13qh94s",
Bnnss6s: "fi64zpg",
Bxotwcr: "f1u07yai",
Budl1dq: "frn2hmy",
wkccdc: "f1olsevy",
oeaueh: "f1s6fcnf",
qhf8xq: "f10pi13n"
},
button: {
Bt984gj: "f122n59",
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: "f3bhgqh",
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bceei9c: "f1k6fduh",
mc9l5x: "f13qh94s",
Bnnss6s: "fi64zpg",
Bxotwcr: "f1u07yai",
Budl1dq: "frn2hmy",
wkccdc: "f1olsevy",
Bahqtrf: "fk6fouc",
Bg96gwp: "f1i3iumi",
oeaueh: "f1s6fcnf",
qhf8xq: "f10pi13n",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
B9bfxx9: "f1cxpek8"
},
horizontal: {
Brf1p80: "f4d9j23"
},
vertical: {
Brf1p80: "f1s9ku6b"
},
smallHorizontal: {
i8kkvl: "f14mj54c",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1wmopi4"
},
smallVertical: {
i8kkvl: "f14mj54c",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f12or63q"
},
mediumHorizontal: {
i8kkvl: "f1rjii52",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1w08f2p"
},
mediumVertical: {
i8kkvl: "f1rjii52",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fymxs25"
},
largeHorizontal: {
i8kkvl: "f1rjii52",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1ssfvub"
},
largeVertical: {
i8kkvl: "f1rjii52",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "fwkd1rq"
},
transparent: {
De3pzq: "f1c21dwh",
B95qlz1: "f9rvdkv",
B7xitij: "f1051ucx",
Bptxc3x: "fmmjozx",
Bwqhzpy: "fqhzt5g",
iyk698: "f7l5cgy",
cl4aha: "fpkze5g",
B0q3jbp: "f1iywnoi",
Be9ayug: "f9n45c4"
},
subtle: {
De3pzq: "fhovq9v",
B95qlz1: "f1bifk9c",
B7xitij: "fo6hitd",
Bptxc3x: "fmmjozx",
Bwqhzpy: "fqhzt5g",
iyk698: "f7l5cgy",
cl4aha: "fpkze5g",
B0q3jbp: "f1iywnoi",
Be9ayug: "f9n45c4"
},
disabledCursor: {
Bceei9c: "fdrzuqr"
},
disabled: {
De3pzq: "f1c21dwh",
Bptxc3x: "fato7r6",
cl4aha: "fao1bnu"
},
selected: {
Bptxc3x: "f1cadz5z",
Bwqhzpy: "fwhdxxj",
iyk698: "fintccb",
cl4aha: "ffplhdr",
B0q3jbp: "fjo17wb",
Be9ayug: "f148789c"
}
}, {
d: [
".f122n59{align-items:center;}",
".f13qh94s{display:grid;}",
".fi64zpg{flex-shrink:0;}",
".f1u07yai{grid-auto-flow:column;}",
".frn2hmy{grid-template-columns:auto;}",
".f1olsevy{grid-template-rows:auto;}",
".f1s6fcnf{outline-style:none;}",
".f10pi13n{position:relative;}",
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
".f1k6fduh{cursor:pointer;}",
".fk6fouc{font-family:var(--fontFamilyBase);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".f1cxpek8{text-transform:none;}",
".f4d9j23{justify-content:center;}",
".f1s9ku6b{justify-content:start;}",
".f14mj54c{column-gap:var(--spacingHorizontalXXS);}",
[
".f1wmopi4{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
[
".f12or63q{padding:var(--spacingVerticalXXS) var(--spacingHorizontalSNudge);}",
{
p: -1
}
],
".f1rjii52{column-gap:var(--spacingHorizontalSNudge);}",
[
".f1w08f2p{padding:var(--spacingVerticalM) var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
[
".fymxs25{padding:var(--spacingVerticalSNudge) var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
[
".f1ssfvub{padding:var(--spacingVerticalL) var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
[
".fwkd1rq{padding:var(--spacingVerticalS) var(--spacingHorizontalMNudge);}",
{
p: -1
}
],
".f1c21dwh{background-color:var(--colorTransparentBackground);}",
".f9rvdkv:enabled:hover{background-color:var(--colorTransparentBackgroundHover);}",
".f1051ucx:enabled:active{background-color:var(--colorTransparentBackgroundPressed);}",
".fmmjozx .fui-Tab__icon{color:var(--colorNeutralForeground2);}",
".fqhzt5g:enabled:hover .fui-Tab__icon{color:var(--colorNeutralForeground2Hover);}",
".f7l5cgy:enabled:active .fui-Tab__icon{color:var(--colorNeutralForeground2Pressed);}",
".fpkze5g .fui-Tab__content{color:var(--colorNeutralForeground2);}",
".f1iywnoi:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground2Hover);}",
".f9n45c4:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground2Pressed);}",
".fhovq9v{background-color:var(--colorSubtleBackground);}",
".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}",
".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}",
".fdrzuqr{cursor:not-allowed;}",
".fato7r6 .fui-Tab__icon{color:var(--colorNeutralForegroundDisabled);}",
".fao1bnu .fui-Tab__content{color:var(--colorNeutralForegroundDisabled);}",
".f1cadz5z .fui-Tab__icon{color:var(--colorCompoundBrandForeground1);}",
".fwhdxxj:enabled:hover .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Hover);}",
".fintccb:enabled:active .fui-Tab__icon{color:var(--colorCompoundBrandForeground1Pressed);}",
".ffplhdr .fui-Tab__content{color:var(--colorNeutralForeground1);}",
".fjo17wb:enabled:hover .fui-Tab__content{color:var(--colorNeutralForeground1Hover);}",
".f148789c:enabled:active .fui-Tab__content{color:var(--colorNeutralForeground1Pressed);}"
]
});
const useCircularAppearanceStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
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: "fp7rvkm",
Bptxc3x: "ftorr8m",
cl4aha: "f16lqpmv"
},
small: {
Dbcxam: 0,
rjzwhg: 0,
Bblux5w: "fzklhed"
},
medium: {
Dbcxam: 0,
rjzwhg: 0,
Bblux5w: "f1j721cc"
},
large: {
Dbcxam: 0,
rjzwhg: 0,
Bblux5w: "frx9knr"
},
subtle: {
De3pzq: "fhovq9v",
sj55zd: "fkfq4zb",
B95qlz1: "f1bifk9c",
Eo63ln: 0,
r9osk6: 0,
Itrz8y: 0,
zeg6vx: 0,
l65xgk: 0,
Bw4olcx: 0,
Folb0i: 0,
I2h8y4: 0,
Bgxgoyi: 0,
Bvlkotb: 0,
Fwyncl: 0,
Byh5edv: 0,
Becqvjq: 0,
uumbiq: 0,
B73q3dg: 0,
Bblwbaf: 0,
B0ezav: "ft57sj0",
r4wkhp: "f1fcoy83",
B7xitij: "fo6hitd",
d3wsvi: 0,
Hdqn7s: 0,
zu5y1p: 0,
owqphb: 0,
g9c53k: 0,
Btmu08z: 0,
Bthxvy6: 0,
gluvuq: 0,
tb88gp: 0,
wns6jk: 0,
kdfdk4: 0,
Bbw008l: 0,
Bayi1ib: 0,
B1kkfu3: 0,
J1oqyp: 0,
kem6az: 0,
goa3yj: "fhn220o",
p743kt: "f15qf7sh",
wmvzou: 0,
sc4o1m: 0,
wymq9i: 0,
u9orzk: 0,
puiv5t: 0,
Bosien3: 0,
b2z72d: 0,
Beulxaw: 0,
B57pkaw: 0,
Jcjdmf: 0,
B8qgbzl: 0,
Bbmb0sr: 0,
B14q8qp: 0,
Bcq6wej: 0,
Byz1pjr: 0,
kr9cjb: 0,
Ff9ifp: "f1mljprk"
},
subtleSelected: {
De3pzq: "f16xkysk",
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: "f1c2pc3t",
sj55zd: "faj9fo0",
B95qlz1: "fsm7zmf",
Eo63ln: 0,
r9osk6: 0,
Itrz8y: 0,
zeg6vx: 0,
l65xgk: 0,
Bw4olcx: 0,
Folb0i: 0,
I2h8y4: 0,
Bgxgoyi: 0,
Bvlkotb: 0,
Fwyncl: 0,
Byh5edv: 0,
Becqvjq: 0,
uumbiq: 0,
B73q3dg: 0,
Bblwbaf: 0,
B0ezav: "f1wo0sfq",
r4wkhp: "f1afuynh",
B7xitij: "f94ddyl",
d3wsvi: 0,
Hdqn7s: 0,
zu5y1p: 0,
owqphb: 0,
g9c53k: 0,
Btmu08z: 0,
Bthxvy6: 0,
gluvuq: 0,
tb88gp: 0,
wns6jk: 0,
kdfdk4: 0,
Bbw008l: 0,
Bayi1ib: 0,
B1kkfu3: 0,
J1oqyp: 0,
kem6az: 0,
goa3yj: "fmle6oo",
p743kt: "f1d3itm4",
wmvzou: 0,
sc4o1m: 0,
wymq9i: 0,
u9orzk: 0,
puiv5t: 0,
Bosien3: 0,
b2z72d: 0,
Beulxaw: 0,
B57pkaw: 0,
Jcjdmf: 0,
B8qgbzl: 0,
Bbmb0sr: 0,
B14q8qp: 0,
Bcq6wej: 0,
Byz1pjr: 0,
kr9cjb: 0,
Ff9ifp: "f1e9l2u"
},
subtleDisabled: {
De3pzq: "fhovq9v",
sj55zd: "f1s2aq7o"
},
subtleDisabledSelected: {
De3pzq: "f1bg9a2p",
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: "fegtqic",
sj55zd: "f1s2aq7o"
},
filled: {
De3pzq: "f16xq7d1",
sj55zd: "fkfq4zb",
B95qlz1: "fwwxidx",
r4wkhp: "f1fcoy83",
B7xitij: "f14i52sd",
p743kt: "f15qf7sh",
Hhssn: "f1cpi5f4",
uaurb9: "f6pj1s0",
B401qx7: "f12sz5kj",
Buyp1jb: "f17588c3",
gsp74p: "fnthgdt"
},
filledSelected: {
De3pzq: "ffp7eso",
sj55zd: "f1phragk",
B95qlz1: "f1lm9dni",
r4wkhp: "f1mn5ei1",
B7xitij: "f1g6ncd0",
p743kt: "fl71aob",
Gedr8k: "f14zl92z",
Bm69vlq: "f16zy3eu",
Bodipah: "f1gdgb7p",
B5kpen0: "f1tua9ng"
},
filledDisabled: {
De3pzq: "f1bg9a2p",
sj55zd: "f1s2aq7o"
},
filledDisabledSelected: {
De3pzq: "f1bg9a2p",
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: "fegtqic",
sj55zd: "f1s2aq7o"
}
}, {
d: [
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".fp7rvkm{border:solid var(--strokeWidthThin) var(--colorTransparentStroke);}",
{
p: -2
}
],
".ftorr8m .fui-Tab__icon{color:inherit;}",
".f16lqpmv .fui-Tab__content{color:inherit;}",
[
".fzklhed{padding-block:calc(var(--spacingVerticalXXS) - var(--strokeWidthThin));}",
{
p: -1
}
],
[
".f1j721cc{padding-block:calc(var(--spacingVerticalSNudge) - var(--strokeWidthThin));}",
{
p: -1
}
],
[
".frx9knr{padding-block:calc(var(--spacingVerticalS) - var(--strokeWidthThin));}",
{
p: -1
}
],
".fhovq9v{background-color:var(--colorSubtleBackground);}",
".fkfq4zb{color:var(--colorNeutralForeground2);}",
".f1bifk9c:enabled:hover{background-color:var(--colorSubtleBackgroundHover);}",
[
".ft57sj0:enabled:hover{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Hover);}",
{
p: -2
}
],
".f1fcoy83:enabled:hover{color:var(--colorNeutralForeground2Hover);}",
".fo6hitd:enabled:active{background-color:var(--colorSubtleBackgroundPressed);}",
[
".fhn220o:enabled:active{border:solid var(--strokeWidthThin) var(--colorNeutralStroke1Pressed);}",
{
p: -2
}
],
".f15qf7sh:enabled:active{color:var(--colorNeutralForeground2Pressed);}",
".f16xkysk{background-color:var(--colorBrandBackground2);}",
[
".f1c2pc3t{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStroke);}",
{
p: -2
}
],
".faj9fo0{color:var(--colorBrandForeground2);}",
".fsm7zmf:enabled:hover{background-color:var(--colorBrandBackground2Hover);}",
[
".f1wo0sfq:enabled:hover{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokeHover);}",
{
p: -2
}
],
".f1afuynh:enabled:hover{color:var(--colorBrandForeground2Hover);}",
".f94ddyl:enabled:active{background-color:var(--colorBrandBackground2Pressed);}",
[
".fmle6oo:enabled:active{border:solid var(--strokeWidthThin) var(--colorCompoundBrandStrokePressed);}",
{
p: -2
}
],
".f1d3itm4:enabled:active{color:var(--colorBrandForeground2Pressed);}",
".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}",
".f1bg9a2p{background-color:var(--colorNeutralBackgroundDisabled);}",
[
".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}",
{
p: -2
}
],
".f16xq7d1{background-color:var(--colorNeutralBackground3);}",
".fwwxidx:enabled:hover{background-color:var(--colorNeutralBackground3Hover);}",
".f14i52sd:enabled:active{background-color:var(--colorNeutralBackground3Pressed);}",
".ffp7eso{background-color:var(--colorBrandBackground);}",
".f1phragk{color:var(--colorNeutralForegroundOnBrand);}",
".f1lm9dni:enabled:hover{background-color:var(--colorBrandBackgroundHover);}",
".f1mn5ei1:enabled:hover{color:var(--colorNeutralForegroundOnBrand);}",
".f1g6ncd0:enabled:active{background-color:var(--colorBrandBackgroundPressed);}",
".fl71aob:enabled:active{color:var(--colorNeutralForegroundOnBrand);}",
[
".fegtqic{border:solid var(--strokeWidthThin) var(--colorNeutralStrokeDisabled);}",
{
p: -2
}
]
],
m: [
[
"@media (forced-colors: active){.f1mljprk{border:solid var(--strokeWidthThin) Canvas;}}",
{
p: -2,
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1e9l2u{border:solid var(--strokeWidthThin) Highlight;}}",
{
p: -2,
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1cpi5f4:enabled:hover{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f6pj1s0:enabled:hover{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f12sz5kj:enabled:hover .fui-Tab__content{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f17588c3:enabled:hover .fui-Icon-filled{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fnthgdt:enabled:hover .fui-Icon-regular{color:HighlightText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f14zl92z:enabled{background-color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f16zy3eu:enabled .fui-Tab__content{color:ButtonFace;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1gdgb7p:enabled .fui-Tab__content{forced-color-adjust:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1tua9ng:enabled .fui-Tab__icon{color:ButtonFace;}}",
{
m: "(forced-colors: active)"
}
]
]
});
/**
* Focus styles for the root slot
*/ const useFocusStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
],
Bn4voq9: "f1p7hgxw",
Bfpq7zp: "f1way5bb",
g9k6zt: "f9znhxp",
j6ew2k: [
"fqa318h",
"fqa318h"
],
Bhxq17a: "f1vjpng2"
},
circular: {
B8q5s1w: "f8hki3x",
Bci5o5g: [
"f1d2448m",
"ffh67wi"
],
n8qw10: "f1bjia2o",
Bdrgwmp: [
"ffh67wi",
"f1d2448m"
],
Bn4voq9: "f1p7hgxw",
Bfpq7zp: "f1way5bb",
g9k6zt: "f9znhxp",
j6ew2k: [
"fzgyhws",
"fqxug60"
],
Bhxq17a: "f1vjpng2"
}
}, {
d: [
".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}",
".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}",
".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}",
".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}",
".f1p7hgxw[data-fui-focus-visible]{outline-width:var(--strokeWidthThick);}",
".f1way5bb[data-fui-focus-visible]{outline-color:transparent;}",
".f9znhxp[data-fui-focus-visible]{outline-style:solid;}",
".fqa318h[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}",
".f1vjpng2[data-fui-focus-visible]{z-index:1;}",
".fzgyhws[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),0 0 0 var(--strokeWidthThin) var(--colorNeutralStrokeOnBrand) inset;}",
".fqxug60[data-fui-focus-visible]{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),0 0 0 var(--strokeWidthThin) var(--colorNeutralStrokeOnBrand) inset;}"
]
});
/** Indicator styles for when pending selection */ const usePendingIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
az7l2e: "fhw179n",
vqofr: 0,
Bv4n3vi: 0,
Bgqb9hq: 0,
B0uxbk8: 0,
Bf3jju6: "fg9j5n4",
amg5m6: "f1kmhr4c",
zkfqfm: "fl1ydde",
Bkydozb: "f1y7maxz",
Bka2azo: 0,
vzq8l0: 0,
csmgbd: 0,
Br4ovkg: 0,
aelrif: "fceyvr4",
y36c18: "f16cxu0",
B1ctymy: "f1nwgacf",
xzc5d: "fm6alxz",
h5yqg8: "fhx32z1"
},
disabled: {
az7l2e: "f1ut20fw",
Bkydozb: "fhrzcfn",
xzc5d: "fw15awd",
h5yqg8: "faqmq51"
},
smallHorizontal: {
lawp4y: "fchca7p",
Baz25je: "f1r53b5e",
Fbdkly: [
"f1s6rxz5",
"fo35v8s"
],
mdwyqc: [
"fo35v8s",
"f1s6rxz5"
]
},
smallVertical: {
lawp4y: "fze4zud",
Fbdkly: [
"f1fzr1x6",
"f1f351id"
],
Bciustq: "fdp32p8",
Ccq8qp: "f1aij3q"
},
mediumHorizontal: {
lawp4y: "fchca7p",
Baz25je: "f1s2r9ax",
Fbdkly: [
"f1o0nnkk",
"fxb7rol"
],
mdwyqc: [
"fxb7rol",
"f1o0nnkk"
]
},
mediumVertical: {
lawp4y: "f17jracn",
Fbdkly: [
"f1fzr1x6",
"f1f351id"
],
Bciustq: "f117lcb2",
Ccq8qp: "f1aij3q"
},
largeHorizontal: {
lawp4y: "fchca7p",
Baz25je: "f1s2r9ax",
Fbdkly: [
"f1o0nnkk",
"fxb7rol"
],
mdwyqc: [
"fxb7rol",
"f1o0nnkk"
]
},
largeVertical: {
lawp4y: "fel9d3z",
Fbdkly: [
"f1fzr1x6",
"f1f351id"
],
Bciustq: "f6vqlre",
Ccq8qp: "f1aij3q"
}
}, {
h: [
".fhw179n:hover::before{background-color:var(--colorNeutralStroke1Hover);}",
[
".fg9j5n4:hover::before{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".f1kmhr4c:hover::before{content:\"\";}",
".fl1ydde:hover::before{position:absolute;}",
".f1ut20fw:hover::before{background-color:var(--colorTransparentStroke);}"
],
a: [
".f1y7maxz:active::before{background-color:var(--colorNeutralStroke1Pressed);}",
[
".fceyvr4:active::before{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".f16cxu0:active::before{content:\"\";}",
".f1nwgacf:active::before{position:absolute;}",
".fhrzcfn:active::before{background-color:var(--colorTransparentStroke);}"
],
m: [
[
"@media (forced-colors: active){.fm6alxz:hover::before{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fhx32z1:active::before{background-color:Highlight;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.fw15awd:hover::before{background-color:transparent;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.faqmq51:active::before{background-color:transparent;}}",
{
m: "(forced-colors: active)"
}
]
],
d: [
".fchca7p::before{bottom:0;}",
".f1r53b5e::before{height:var(--strokeWidthThick);}",
".f1s6rxz5::before{left:var(--spacingHorizontalSNudge);}",
".fo35v8s::before{right:var(--spacingHorizontalSNudge);}",
".fze4zud::before{bottom:var(--spacingVerticalXS);}",
".f1fzr1x6::before{left:0;}",
".f1f351id::before{right:0;}",
".fdp32p8::before{top:var(--spacingVerticalXS);}",
".f1aij3q::before{width:var(--strokeWidthThicker);}",
".f1s2r9ax::before{height:var(--strokeWidthThicker);}",
".f1o0nnkk::before{left:var(--spacingHorizontalM);}",
".fxb7rol::before{right:var(--spacingHorizontalM);}",
".f17jracn::before{bottom:var(--spacingVerticalS);}",
".f117lcb2::before{top:var(--spacingVerticalS);}",
".fel9d3z::before{bottom:var(--spacingVerticalMNudge);}",
".f6vqlre::before{top:var(--spacingVerticalMNudge);}"
]
});
const useActiveIndicatorStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bjyk6c5: "f1rp0jgh",
d9w3h3: 0,
B3778ie: 0,
B4j8arr: 0,
Bl18szs: 0,
Blrzh8d: "f3b9emi",
Bsft5z2: "f13zj6fq",
E3zdtr: "f1mdlcz9"
},
selected: {
Bjyk6c5: "f1ksivud",
Bej4dhw: "f1476jrx",
B7wqxwa: "f18q216b",
Hwb57: "f1wf6u82",
Beg08s0: "f1xwit7m",
Bo27r1v: "f1ksfgwi"
},
disabled: {
Bjyk6c5: "f13lkzet"
},
smallHorizontal: {
By385i5: "fo72kxq",
Dlnsje: "f9bb2ob",
Eqx8gd: [
"f1q70ajw",
"f18rbzdx"
],
B1piin3: [
"f18rbzdx",
"f1q70ajw"
]
},
smallVertical: {
By385i5: "fqbue9b",
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
bn5sak: "fk1klkt",
a2br6o: "f1o25lip"
},
mediumHorizontal: {
By385i5: "fo72kxq",
Dlnsje: "f1vx7lu8",
Eqx8gd: [
"fna7m5n",
"f1oxpfwv"
],
B1piin3: [
"f1oxpfwv",
"fna7m5n"
]
},
mediumVertical: {
By385i5: "fipylg0",
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
bn5sak: "fqchiol",
a2br6o: "f1o25lip"
},
largeHorizontal: {
By385i5: "fo72kxq",
Dlnsje: "f1vx7lu8",
Eqx8gd: [
"fna7m5n",
"f1oxpfwv"
],
B1piin3: [
"f1oxpfwv",
"fna7m5n"
]
},
largeVertical: {
By385i5: "f1w7dm5g",
Eqx8gd: [
"f1n6gb5g",
"f15yvnhg"
],
bn5sak: "f1p6em4m",
a2br6o: "f1o25lip"
}
}, {
d: [
".f1rp0jgh::after{background-color:var(--colorTransparentStroke);}",
[
".f3b9emi::after{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
".f13zj6fq::after{content:\"\";}",
".f1mdlcz9::after{position:absolute;}",
".f1ksivud::after{background-color:var(--colorCompoundBrandStroke);}",
".f1476jrx:enabled:hover::after{background-color:var(--colorCompoundBrandStrokeHover);}",
".f18q216b:enabled:active::after{background-color:var(--colorCompoundBrandStrokePressed);}",
".f13lkzet::after{background-color:var(--colorNeutralForegroundDisabled);}",
".fo72kxq::after{bottom:0;}",
".f9bb2ob::after{height:var(--strokeWidthThick);}",
".f1q70ajw::after{left:var(--spacingHorizontalSNudge);}",
".f18rbzdx::after{right:var(--spacingHorizontalSNudge);}",
".fqbue9b::after{bottom:var(--spacingVerticalXS);}",
".f1n6gb5g::after{left:0;}",
".f15yvnhg::after{right:0;}",
".fk1klkt::after{top:var(--spacingVerticalXS);}",
".f1o25lip::after{width:var(--strokeWidthThicker);}",
".f1vx7lu8::after{height:var(--strokeWidthThicker);}",
".fna7m5n::after{left:var(--spacingHorizontalM);}",
".f1oxpfwv::after{right:var(--spacingHorizontalM);}",
".fipylg0::after{bottom:var(--spacingVerticalS);}",
".fqchiol::after{top:var(--spacingVerticalS);}",
".f1w7dm5g::after{bottom:var(--spacingVerticalMNudge);}",
".f1p6em4m::after{top:var(--spacingVerticalMNudge);}"
],
m: [
[
"@media (forced-colors: active){.f1wf6u82::after{background-color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1xwit7m:enabled:hover::after{background-color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1ksfgwi:enabled:active::after{background-color:ButtonText;}}",
{
m: "(forced-colors: active)"
}
]
]
});
/**
* Styles for the icon slot.
*/ const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Br312pm: "fwpfdsa",
Ijaq50: "f16hsg94",
Bt984gj: "f122n59",
mc9l5x: "ftuwxu6",
Brf1p80: "f4d9j23",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
D0sxk3: "f16u1re",
t6yez3: "f8bsbmo"
},
small: {
Be2twd7: "fe5j1ua",
Bqenvij: "fjamq6b",
a9b677: "f64fuq3"
},
medium: {
Be2twd7: "fe5j1ua",
Bqenvij: "fjamq6b",
a9b677: "f64fuq3"
},
large: {
Be2twd7: "f1rt2boy",
Bqenvij: "frvgh55",
a9b677: "fq4mcun"
},
selected: {
D0sxk3: "fxoiby5",
t6yez3: "f15q0o9g"
}
}, {
d: [
".fwpfdsa{grid-column-start:1;}",
".f16hsg94{grid-row-start:1;}",
".f122n59{align-items:center;}",
".ftuwxu6{display:inline-flex;}",
".f4d9j23{justify-content:center;}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
".f16u1re .fui-Icon-filled{display:none;}",
".f8bsbmo .fui-Icon-regular{display:inline;}",
".fe5j1ua{font-size:20px;}",
".fjamq6b{height:20px;}",
".f64fuq3{width:20px;}",
".f1rt2boy{font-size:24px;}",
".frvgh55{height:24px;}",
".fq4mcun{width:24px;}",
".fxoiby5 .fui-Icon-filled{display:inline;}",
".f15q0o9g .fui-Icon-regular{display:none;}"
]
});
/**
* Styles for the content slot (children)
*/ const useContentStyles = /*#__PURE__*/ (0, _react.__styles)({
base: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "figsok6",
Bg96gwp: "f1i3iumi",
B68tc82: 0,
Bmxbyg5: 0,
Bpg54ce: "f1a3p1vp",
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f1bwptpd"
},
selected: {
Bahqtrf: "fk6fouc",
Be2twd7: "fkhj508",
Bhrd7zp: "fl43uef",
Bg96gwp: "f1i3iumi"
},
large: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "figsok6",
Bg96gwp: "faaz57k"
},
largeSelected: {
Bahqtrf: "fk6fouc",
Be2twd7: "fod5ikn",
Bhrd7zp: "fl43uef",
Bg96gwp: "faaz57k"
},
noIconBefore: {
Br312pm: "fwpfdsa",
Ijaq50: "f16hsg94"
},
iconBefore: {
Br312pm: "fd46tj4",
Ijaq50: "f16hsg94"
},
placeholder: {
Bcdw1i0: "fd7fpy0"
}
}, {
d: [
".fk6fouc{font-family:var(--fontFamilyBase);}",
".fkhj508{font-size:var(--fontSizeBase300);}",
".figsok6{font-weight:var(--fontWeightRegular);}",
".f1i3iumi{line-height:var(--lineHeightBase300);}",
[
".f1a3p1vp{overflow:hidden;}",
{
p: -1
}
],
[
".f1bwptpd{padding:var(--spacingVerticalNone) var(--spacingHorizontalXXS);}",
{
p: -1
}
],
".fl43uef{font-weight:var(--fontWeightSemibold);}",
".fod5ikn{font-size:var(--fontSizeBase400);}",
".faaz57k{line-height:var(--lineHeightBase400);}",
".fwpfdsa{grid-column-start:1;}",
".f16hsg94{grid-row-start:1;}",
".fd46tj4{grid-column-start:2;}",
".fd7fpy0{visibility:hidden;}"
]
});
const useTabStyles_unstable = (state)=>{
'use no memo';
useTabIndicatorStyles_unstable(state);
useTabButtonStyles_unstable(state, state.root);
useTabContentStyles_unstable(state);
return state;
};
const useTabIndicatorStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootStyles();
const pendingIndicatorStyles = usePendingIndicatorStyles();
const activeIndicatorStyles = useActiveIndicatorStyles();
const { appearance, disabled, selected, size, vertical } = state;
const classes = [
tabClassNames.root,
rootStyles.root
];
if (appearance !== 'subtle-circular' && appearance !== 'filled-circular') {
classes.push(// pending indicator (before pseudo element)
pendingIndicatorStyles.base, size === 'small' && (vertical ? pendingIndicatorStyles.smallVertical : pendingIndicatorStyles.smallHorizontal), size === 'medium' && (vertical ? pendingIndicatorStyles.mediumVertical : pendingIndicatorStyles.mediumHorizontal), size === 'large' && (vertical ? pendingIndicatorStyles.largeVertical : pendingIndicatorStyles.largeHorizontal), disabled && pendingIndicatorStyles.disabled, // active indicator (after pseudo element)
selected && activeIndicatorStyles.base, selected && !disabled && activeIndicatorStyles.selected, selected && size === 'small' && (vertical ? activeIndicatorStyles.smallVertical : activeIndicatorStyles.smallHorizontal), selected && size === 'medium' && (vertical ? activeIndicatorStyles.mediumVertical : activeIndicatorStyles.mediumHorizontal), selected && size === 'large' && (vertical ? activeIndicatorStyles.largeVertical : activeIndicatorStyles.largeHorizontal), selected && disabled && activeIndicatorStyles.disabled);
}
state.root.className = (0, _react.mergeClasses)(...classes, state.root.className);
(0, _useTabAnimatedIndicatorstyles.useTabAnimatedIndicatorStyles_unstable)(state);
return state;
};
const useTabButtonStyles_unstable = (state, slot)=>{
'use no memo';
const rootStyles = useRootStyles();
const focusStyles = useFocusStyles();
const circularStyles = useCircularAppearanceStyles();
const { appearance, disabled, selected, size, vertical } = state;
const isSubtleCircular = appearance === 'subtle-circular';
const isFilledCircular = appearance === 'filled-circular';
const isCircular = isSubtleCircular || isFilledCircular;
const circularAppearance = [
circularStyles.base,
focusStyles.circular,
// sizes
size === 'small' && circularStyles.small,
size === 'medium' && circularStyles.medium,
size === 'large' && circularStyles.large,
// subtle-circular appearance
isSubtleCircular && circularStyles.subtle,
selected && isSubtleCircular && circularStyles.subtleSelected,
disabled && isSubtleCircular && circularStyles.subtleDisabled,
selected && disabled && isSubtleCircular && circularStyles.subtleDisabledSelected,
// filled-circular appearance
isFilledCircular && circularStyles.filled,
selected && isFilledCircular && circularStyles.filledSelected,
disabled && isFilledCircular && circularStyles.filledDisabled,
selected && disabled && isFilledCircular && circularStyles.filledDisabledSelected
];
const regularAppearance = [
focusStyles.base,
!disabled && appearance === 'subtle' && rootStyles.subtle,
!disabled && appearance === 'transparent' && rootStyles.transparent,
!disabled && selected && rootStyles.selected,
disabled && rootStyles.disabled
];
slot.className = (0, _react.mergeClasses)(rootStyles.button, // orientation
vertical ? rootStyles.vertical : rootStyles.horizontal, // size
size === 'small' && (vertical ? rootStyles.smallVertical : rootStyles.smallHorizontal), size === 'medium' && (vertical ? rootStyles.mediumVertical : rootStyles.mediumHorizontal), size === 'large' && (vertical ? rootStyles.largeVertical : rootStyles.largeHorizontal), ...isCircular ? circularAppearance : regularAppearance, disabled && rootStyles.disabledCursor, slot.className);
return state;
};
const useTabContentStyles_unstable = (state)=>{
'use no memo';
const iconStyles = useIconStyles();
const contentStyles = useContentStyles();
const { selected, size } = state;
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(tabClassNames.icon, iconStyles.base, iconStyles[size], selected && iconStyles.selected, state.icon.className);
}
// This needs to be before state.content.className is updated
if (state.contentReservedSpace) {
state.contentReservedSpace.className = (0, _react.mergeClasses)(tabReservedSpaceClassNames.content, contentStyles.base, size === 'large' ? contentStyles.largeSelected : contentStyles.selected, state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, contentStyles.placeholder, state.content.className);
// FIXME: this is a deprecated API
// should be removed in the next major version
// eslint-disable-next-line @typescript-eslint/no-deprecated
state.contentReservedSpaceClassName = state.contentReservedSpace.className;
}
state.content.className = (0, _react.mergeClasses)(tabClassNames.content, contentStyles.base, size === 'large' && contentStyles.large, selected && (size === 'large' ? contentStyles.largeSelected : contentStyles.selected), state.icon ? contentStyles.iconBefore : contentStyles.noIconBefore, state.content.className);
return state;
};