feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-radio/lib-commonjs/components/Radio/useRadioStyles.styles.js

@@ -0,0 +1,180 @@
+'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, {
+    radioClassNames: function() {
+        return radioClassNames;
+    },
+    useRadioStyles_unstable: function() {
+        return useRadioStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const radioClassNames = {
+    root: 'fui-Radio',
+    indicator: 'fui-Radio__indicator',
+    input: 'fui-Radio__input',
+    label: 'fui-Radio__label'
+};
+// The indicator size is used by the indicator and label styles
+const indicatorSize = '16px';
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1siqwd8", "rmnplyc", {
+    r: [
+        ".r1siqwd8{display:inline-flex;position:relative;}",
+        ".r1siqwd8:focus{outline-style:none;}",
+        ".r1siqwd8:focus-visible{outline-style:none;}",
+        ".r1siqwd8[data-fui-focus-within]:focus-within{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r1siqwd8[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".rmnplyc{display:inline-flex;position:relative;}",
+        ".rmnplyc:focus{outline-style:none;}",
+        ".rmnplyc:focus-visible{outline-style:none;}",
+        ".rmnplyc[data-fui-focus-within]:focus-within{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".rmnplyc[data-fui-focus-within]:focus-within::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r1siqwd8[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}",
+        "@media (forced-colors: active){.rmnplyc[data-fui-focus-within]:focus-within::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"
+    ]
+});
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    vertical: {
+        Beiy3e4: "f1vx9l62",
+        Bt984gj: "f122n59"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}",
+        ".f122n59{align-items:center;}"
+    ]
+});
+const useInputBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rg1upok", "rzwdzb4", {
+    r: [
+        ".rg1upok{position:absolute;left:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
+        ".rg1upok:enabled{cursor:pointer;}",
+        ".rg1upok:enabled~.fui-Radio__label{cursor:pointer;}",
+        ".rg1upok:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
+        ".rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rg1upok:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
+        ".rg1upok:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rg1upok:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rg1upok:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rg1upok:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
+        ".rg1upok:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
+        ".rg1upok:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
+        ".rg1upok:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
+        ".rg1upok:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}",
+        ".rzwdzb4{position:absolute;right:0;top:0;width:calc(16px + 2 * var(--spacingHorizontalS));height:100%;box-sizing:border-box;margin:0;opacity:0;}",
+        ".rzwdzb4:enabled{cursor:pointer;}",
+        ".rzwdzb4:enabled~.fui-Radio__label{cursor:pointer;}",
+        ".rzwdzb4:enabled:not(:checked)~.fui-Radio__label{color:var(--colorNeutralForeground3);}",
+        ".rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessible);}",
+        ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__label{color:var(--colorNeutralForeground2);}",
+        ".rzwdzb4:enabled:not(:checked):hover~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessibleHover);}",
+        ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rzwdzb4:enabled:not(:checked):hover:active~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeAccessiblePressed);}",
+        ".rzwdzb4:enabled:checked~.fui-Radio__label{color:var(--colorNeutralForeground1);}",
+        ".rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStroke);color:var(--colorCompoundBrandForeground1);}",
+        ".rzwdzb4:enabled:checked:hover~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokeHover);color:var(--colorCompoundBrandForeground1Hover);}",
+        ".rzwdzb4:enabled:checked:hover:active~.fui-Radio__indicator{border-color:var(--colorCompoundBrandStrokePressed);color:var(--colorCompoundBrandForeground1Pressed);}",
+        ".rzwdzb4:disabled~.fui-Radio__label{color:var(--colorNeutralForegroundDisabled);cursor:default;}",
+        ".rzwdzb4:disabled~.fui-Radio__indicator{border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.rg1upok:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
+        "@media (forced-colors: active){.rg1upok:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rg1upok:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
+        "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__label{color:GrayText;}}",
+        "@media (forced-colors: active){.rg1upok:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rg1upok:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}",
+        "@media (forced-colors: active){.rzwdzb4:enabled:not(:checked)~.fui-Radio__indicator{border-color:ButtonBorder;}}",
+        "@media (forced-colors: active){.rzwdzb4:enabled:checked~.fui-Radio__indicator{border-color:Highlight;color:Highlight;}.rzwdzb4:enabled:checked~.fui-Radio__indicator::after{background-color:Highlight;}}",
+        "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__label{color:GrayText;}}",
+        "@media (forced-colors: active){.rzwdzb4:disabled~.fui-Radio__indicator{border-color:GrayText;color:GrayText;}.rzwdzb4:disabled~.fui-Radio__indicator::after{background-color:GrayText;}}"
+    ]
+});
+const useInputStyles = /*#__PURE__*/ (0, _react.__styles)({
+    below: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1je6zif"
+    },
+    defaultIndicator: {
+        Blbys7f: "f9ma1gx"
+    },
+    customIndicator: {
+        Bj53wkj: "f12zxao0"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f1je6zif{height:calc(16px + 2 * var(--spacingVerticalS));}",
+        ".f9ma1gx:checked~.fui-Radio__indicator::after{content:\"\";}",
+        ".f12zxao0:not(:checked)~.fui-Radio__indicator>*{opacity:0;}"
+    ]
+});
+const useIndicatorBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rwtekvw", null, [
+    ".rwtekvw{position:relative;width:16px;height:16px;font-size:12px;box-sizing:border-box;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden;border:var(--strokeWidthThin) solid;border-radius:var(--borderRadiusCircular);margin:var(--spacingVerticalS) var(--spacingHorizontalS);fill:currentColor;pointer-events:none;}",
+    ".rwtekvw::after{position:absolute;width:16px;height:16px;border-radius:var(--borderRadiusCircular);transform:scale(0.625);background-color:currentColor;}"
+]);
+// Can't use makeResetStyles here because Label is a component that may itself use makeResetStyles.
+const useLabelStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        qb2dma: "f7nlbp4",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1f5q0n8"
+    },
+    after: {
+        uwmqm3: [
+            "fruq291",
+            "f7x41pl"
+        ],
+        B6of3ja: "fjzwpt6",
+        jrapky: "fh6j2fo"
+    },
+    below: {
+        z8tnut: "f1ywm7hm",
+        fsow6f: "f17mccla"
+    }
+}, {
+    d: [
+        ".f7nlbp4{align-self:center;}",
+        [
+            ".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".fruq291{padding-left:var(--spacingHorizontalXS);}",
+        ".f7x41pl{padding-right:var(--spacingHorizontalXS);}",
+        ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}",
+        ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}",
+        ".f17mccla{text-align:center;}"
+    ]
+});
+const useRadioStyles_unstable = (state)=>{
+    'use no memo';
+    const { labelPosition } = state;
+    const rootBaseClassName = useRootBaseClassName();
+    const rootStyles = useRootStyles();
+    state.root.className = (0, _react.mergeClasses)(radioClassNames.root, rootBaseClassName, labelPosition === 'below' && rootStyles.vertical, state.root.className);
+    const inputBaseClassName = useInputBaseClassName();
+    const inputStyles = useInputStyles();
+    state.input.className = (0, _react.mergeClasses)(radioClassNames.input, inputBaseClassName, labelPosition === 'below' && inputStyles.below, state.indicator.children ? inputStyles.customIndicator : inputStyles.defaultIndicator, state.input.className);
+    const indicatorBaseClassName = useIndicatorBaseClassName();
+    state.indicator.className = (0, _react.mergeClasses)(radioClassNames.indicator, indicatorBaseClassName, state.indicator.className);
+    const labelStyles = useLabelStyles();
+    if (state.label) {
+        state.label.className = (0, _react.mergeClasses)(radioClassNames.label, labelStyles.base, labelStyles[labelPosition], state.label.className);
+    }
+    return state;
+};