bootstrap-rn 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bootstrap-rn.cjs.js +1107 -893
- package/dist/bootstrap-rn.esm.js +1107 -892
- package/dist/bootstrap-rn.umd.js +1114 -2422
- package/dist/bootstrap-rn.umd.min.js +3 -3
- package/package.json +1 -2
package/dist/bootstrap-rn.cjs.js
CHANGED
|
@@ -2,22 +2,20 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var cssToReactNative = require('css-to-react-native');
|
|
6
5
|
var reactNative = require('react-native');
|
|
6
|
+
var cssToReactNative = require('css-to-react-native');
|
|
7
7
|
var polished = require('polished');
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var reactNativeSvg = require('react-native-svg');
|
|
10
10
|
var PropTypes = require('prop-types');
|
|
11
11
|
var overlays = require('@react-native-aria/overlays');
|
|
12
12
|
var invariant = require('tiny-invariant');
|
|
13
|
-
var Overlay$1 = require('react-native-popover-view');
|
|
14
13
|
|
|
15
14
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
16
15
|
|
|
17
16
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
18
17
|
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
19
18
|
var invariant__default = /*#__PURE__*/_interopDefaultLegacy(invariant);
|
|
20
|
-
var Overlay__default = /*#__PURE__*/_interopDefaultLegacy(Overlay$1);
|
|
21
19
|
|
|
22
20
|
function ownKeys(object, enumerableOnly) {
|
|
23
21
|
var keys = Object.keys(object);
|
|
@@ -764,7 +762,19 @@ function transform(children, theme) {
|
|
|
764
762
|
|
|
765
763
|
|
|
766
764
|
if (child.type === 'declaration' && value !== 'null') {
|
|
767
|
-
if (child.name === '
|
|
765
|
+
if (child.name === 'box-shadow') {
|
|
766
|
+
if (reactNative.Platform.OS === 'web') {
|
|
767
|
+
Object.assign(definitions[0].declarations, {
|
|
768
|
+
boxShadow: value
|
|
769
|
+
});
|
|
770
|
+
}
|
|
771
|
+
} else if (child.name === 'order') {
|
|
772
|
+
if (reactNative.Platform.OS === 'web') {
|
|
773
|
+
Object.assign(definitions[0].declarations, {
|
|
774
|
+
order: value
|
|
775
|
+
});
|
|
776
|
+
}
|
|
777
|
+
} else if (child.name === 'border-color' && value.split(' ').length === 1) {
|
|
768
778
|
// Workaround for react-native issue #19981
|
|
769
779
|
// https://github.com/facebook/react-native/issues/19981
|
|
770
780
|
Object.assign(definitions[0].declarations, {
|
|
@@ -1041,6 +1051,17 @@ function optional(condition, value) {
|
|
|
1041
1051
|
function getElementId(identifier, name) {
|
|
1042
1052
|
return "".concat(identifier).concat(name ? "-".concat(name) : '');
|
|
1043
1053
|
}
|
|
1054
|
+
function transformPlacement$1(placement) {
|
|
1055
|
+
if (placement === 'left') {
|
|
1056
|
+
return reactNative.I18nManager.isRTL ? 'end' : 'start';
|
|
1057
|
+
}
|
|
1058
|
+
|
|
1059
|
+
if (placement === 'right') {
|
|
1060
|
+
return reactNative.I18nManager.isRTL ? 'start' : 'end';
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
return placement;
|
|
1064
|
+
}
|
|
1044
1065
|
function convertToREM(value) {
|
|
1045
1066
|
return value.replace(/([+-]+)?([\d.Ee]+)px/, function (_, unary, number) {
|
|
1046
1067
|
return "".concat(unary || '').concat(number / (reactNative.PixelRatio.getFontScale() * 16), "rem");
|
|
@@ -1884,13 +1905,13 @@ var utilities = {
|
|
|
1884
1905
|
|
|
1885
1906
|
};
|
|
1886
1907
|
|
|
1887
|
-
var _templateObject$
|
|
1908
|
+
var _templateObject$13, _templateObject2$I;
|
|
1888
1909
|
function makeUtility(options) {
|
|
1889
1910
|
return each(options.values, function (key, value) {
|
|
1890
1911
|
var name = options.class || options.property;
|
|
1891
1912
|
var suffix = key === 'null' ? '' : "-".concat(key);
|
|
1892
1913
|
|
|
1893
|
-
var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$
|
|
1914
|
+
var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n ", ": ", ";\n "])), options.property, value));
|
|
1894
1915
|
|
|
1895
1916
|
if (!options.responsive) {
|
|
1896
1917
|
return styles;
|
|
@@ -1901,7 +1922,7 @@ function makeUtility(options) {
|
|
|
1901
1922
|
return null;
|
|
1902
1923
|
}
|
|
1903
1924
|
|
|
1904
|
-
return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$
|
|
1925
|
+
return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$I || (_templateObject2$I = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n ", ": ", ";\n }\n "])), breakpoint, options.property, value));
|
|
1905
1926
|
}));
|
|
1906
1927
|
});
|
|
1907
1928
|
}
|
|
@@ -2005,7 +2026,7 @@ function subtract(value1, value2) {
|
|
|
2005
2026
|
// TODO
|
|
2006
2027
|
} */
|
|
2007
2028
|
|
|
2008
|
-
var _templateObject
|
|
2029
|
+
var _templateObject$12;
|
|
2009
2030
|
// Also all elements have tabIndex={-1} until the following is merged:
|
|
2010
2031
|
// https://github.com/react-native-svg/react-native-svg/pull/1585
|
|
2011
2032
|
|
|
@@ -2163,7 +2184,7 @@ var svgs = {
|
|
|
2163
2184
|
}));
|
|
2164
2185
|
}
|
|
2165
2186
|
};
|
|
2166
|
-
var variables = css(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n // Color system\n\n $white: #fff;\n $gray-100: #f8f9fa;\n $gray-200: #e9ecef;\n $gray-300: #dee2e6;\n $gray-400: #ced4da;\n $gray-500: #adb5bd;\n $gray-600: #6c757d;\n $gray-700: #495057;\n $gray-800: #343a40;\n $gray-900: #212529;\n $black: #000;\n\n $grays: ", ";\n\n $blue: #0d6efd;\n $indigo: #6610f2;\n $purple: #6f42c1;\n $pink: #d63384;\n $red: #dc3545;\n $orange: #fd7e14;\n $yellow: #ffc107;\n $green: #198754;\n $teal: #20c997;\n $cyan: #0dcaf0;\n\n $colors: ", ";\n\n $primary: $blue;\n $secondary: $gray-600;\n $success: $green;\n $info: $cyan;\n $warning: $yellow;\n $danger: $red;\n $light: $gray-100;\n $dark: $gray-900;\n\n $theme-colors: ", ";\n\n // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n $min-contrast-ratio: 4.5;\n\n // Customize the light and dark text colors for use in our color contrast function.\n $color-contrast-dark: $black;\n $color-contrast-light: $white;\n\n $blue-100: tint-color($blue, 80%);\n $blue-200: tint-color($blue, 60%);\n $blue-300: tint-color($blue, 40%);\n $blue-400: tint-color($blue, 20%);\n $blue-500: $blue;\n $blue-600: shade-color($blue, 20%);\n $blue-700: shade-color($blue, 40%);\n $blue-800: shade-color($blue, 60%);\n $blue-900: shade-color($blue, 80%);\n\n $indigo-100: tint-color($indigo, 80%);\n $indigo-200: tint-color($indigo, 60%);\n $indigo-300: tint-color($indigo, 40%);\n $indigo-400: tint-color($indigo, 20%);\n $indigo-500: $indigo;\n $indigo-600: shade-color($indigo, 20%);\n $indigo-700: shade-color($indigo, 40%);\n $indigo-800: shade-color($indigo, 60%);\n $indigo-900: shade-color($indigo, 80%);\n\n $purple-100: tint-color($purple, 80%);\n $purple-200: tint-color($purple, 60%);\n $purple-300: tint-color($purple, 40%);\n $purple-400: tint-color($purple, 20%);\n $purple-500: $purple;\n $purple-600: shade-color($purple, 20%);\n $purple-700: shade-color($purple, 40%);\n $purple-800: shade-color($purple, 60%);\n $purple-900: shade-color($purple, 80%);\n\n $pink-100: tint-color($pink, 80%);\n $pink-200: tint-color($pink, 60%);\n $pink-300: tint-color($pink, 40%);\n $pink-400: tint-color($pink, 20%);\n $pink-500: $pink;\n $pink-600: shade-color($pink, 20%);\n $pink-700: shade-color($pink, 40%);\n $pink-800: shade-color($pink, 60%);\n $pink-900: shade-color($pink, 80%);\n\n $red-100: tint-color($red, 80%);\n $red-200: tint-color($red, 60%);\n $red-300: tint-color($red, 40%);\n $red-400: tint-color($red, 20%);\n $red-500: $red;\n $red-600: shade-color($red, 20%);\n $red-700: shade-color($red, 40%);\n $red-800: shade-color($red, 60%);\n $red-900: shade-color($red, 80%);\n\n $orange-100: tint-color($orange, 80%);\n $orange-200: tint-color($orange, 60%);\n $orange-300: tint-color($orange, 40%);\n $orange-400: tint-color($orange, 20%);\n $orange-500: $orange;\n $orange-600: shade-color($orange, 20%);\n $orange-700: shade-color($orange, 40%);\n $orange-800: shade-color($orange, 60%);\n $orange-900: shade-color($orange, 80%);\n\n $yellow-100: tint-color($yellow, 80%);\n $yellow-200: tint-color($yellow, 60%);\n $yellow-300: tint-color($yellow, 40%);\n $yellow-400: tint-color($yellow, 20%);\n $yellow-500: $yellow;\n $yellow-600: shade-color($yellow, 20%);\n $yellow-700: shade-color($yellow, 40%);\n $yellow-800: shade-color($yellow, 60%);\n $yellow-900: shade-color($yellow, 80%);\n\n $green-100: tint-color($green, 80%);\n $green-200: tint-color($green, 60%);\n $green-300: tint-color($green, 40%);\n $green-400: tint-color($green, 20%);\n $green-500: $green;\n $green-600: shade-color($green, 20%);\n $green-700: shade-color($green, 40%);\n $green-800: shade-color($green, 60%);\n $green-900: shade-color($green, 80%);\n\n $teal-100: tint-color($teal, 80%);\n $teal-200: tint-color($teal, 60%);\n $teal-300: tint-color($teal, 40%);\n $teal-400: tint-color($teal, 20%);\n $teal-500: $teal;\n $teal-600: shade-color($teal, 20%);\n $teal-700: shade-color($teal, 40%);\n $teal-800: shade-color($teal, 60%);\n $teal-900: shade-color($teal, 80%);\n\n $cyan-100: tint-color($cyan, 80%);\n $cyan-200: tint-color($cyan, 60%);\n $cyan-300: tint-color($cyan, 40%);\n $cyan-400: tint-color($cyan, 20%);\n $cyan-500: $cyan;\n $cyan-600: shade-color($cyan, 20%);\n $cyan-700: shade-color($cyan, 40%);\n $cyan-800: shade-color($cyan, 60%);\n $cyan-900: shade-color($cyan, 80%);\n\n $blues: ", ";\n\n $indigos: ", ";\n\n $purples: ", ";\n\n $pinks: ", ";\n\n $reds: ", ";\n\n $oranges: ", ";\n\n $yellows: ", ";\n\n $greens: ", ";\n\n $teals: ", ";\n\n $cyans: ", ";\n\n // Characters which are escaped by the escape-svg function\n // $escaped characters\n\n // Options\n //\n // Quickly modify global styling by enabling or disabling optional features.\n\n // NOTE: Handled by JavaScript.\n\n // Gradient\n //\n // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n // This gradient is also added to elements with \".bg-gradient\"\n $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n // Spacing\n //\n // Control the default styling of most Bootstrap elements by modifying these\n // variables. Mostly focused on spacing.\n // You can add more entries to the $spacers map, should you need more variation.\n\n $spacer: 1rem;\n $spacers: ", ";\n\n // Position\n //\n // Define the edge positioning anchors of the position utilities.\n\n $position-values: ", ";\n\n // Body\n //\n // Settings for the \"<body>\" element.\n\n $body-bg: $white;\n $body-color: $gray-900;\n $body-text-align: null;\n\n // Links\n //\n // Style anchor elements.\n\n $link-color: $primary;\n $link-decoration: underline;\n $link-shade-percentage: 0.2; // 20%;\n $link-hover-color: ", ";\n $link-hover-decoration: null;\n\n $stretched-link-pseudo-element: after;\n $stretched-link-z-index: 1;\n\n // Paragraphs\n //\n // Style p element.\n\n $paragraph-margin-bottom: 1rem;\n\n // Grid breakpoints\n //\n // Define the minimum dimensions at which your layout will change,\n // adapting to different screen sizes, for use in media queries.\n\n $grid-breakpoints: ", ";\n\n // Grid containers\n //\n // Define the maximum width of \".container\" for different screen sizes.\n\n $container-max-widths: ", ";\n\n // Grid columns\n //\n // Set the number of columns and specify the width of the gutters.\n\n // $grid-columns: 12;\n $grid-gutter-width: 1.5rem;\n // $grid-row-columns: 6;\n\n // Container padding\n\n $container-padding-x: $grid-gutter-width * 0.5;\n\n // Components\n //\n // Define common padding and border radius sizes and more.\n\n $border-width: 1px;\n $border-widths: ", ";\n\n $border-color: $gray-300;\n\n $border-radius: 0.25rem;\n $border-radius-sm: 0.2rem;\n $border-radius-lg: 0.3rem;\n $border-radius-pill: 50rem;\n\n $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);\n $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);\n $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);\n $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);\n\n $component-active-color: $white;\n $component-active-bg: $primary;\n\n $caret-width: 0.3em;\n $caret-vertical-align: $caret-width * 0.85;\n $caret-spacing: $caret-width * 0.85;\n\n $transition-base: all 0.2s ease-in-out;\n $transition-fade: opacity 0.15s linear;\n $transition-collapse: height 0.35s ease;\n $transition-collapse-width: width 0.35s ease;\n\n $aspect-ratios: ", ";\n\n // Typography\n //\n // Font, line-height, and color for body text, headings, and more.\n\n $font-family-sans-serif: ", ";\n $font-family-monospace: ", ";\n $font-family-base: $font-family-sans-serif;\n $font-family-code: $font-family-monospace;\n\n // $font-size-root affects the value of \"rem\", which is used for as well font sizes, paddings, and margins\n // $font-size-base affects the font size of the body text\n $font-size-root: null;\n $font-size-base: 1rem; // Assumes the browser default, typically \"16px\"\n $font-size-sm: $font-size-base * 0.875;\n $font-size-lg: $font-size-base * 1.25;\n\n $font-weight-lighter: 300; // lighter;\n $font-weight-light: 300;\n $font-weight-normal: 400;\n $font-weight-bold: 700;\n $font-weight-bolder: 500; // bolder;\n\n $font-weight-base: $font-weight-normal;\n\n $line-height-base: 1.5;\n $line-height-sm: 1.25;\n $line-height-lg: 2;\n\n $h1-font-size: $font-size-base * 2.5;\n $h2-font-size: $font-size-base * 2;\n $h3-font-size: $font-size-base * 1.75;\n $h4-font-size: $font-size-base * 1.5;\n $h5-font-size: $font-size-base * 1.25;\n $h6-font-size: $font-size-base;\n\n $font-sizes: ", ";\n\n $headings-margin-bottom: $spacer * 0.5;\n $headings-font-family: null;\n $headings-font-style: null;\n $headings-font-weight: 500;\n $headings-line-height: 1.2;\n $headings-color: null;\n\n $display-font-sizes: ", ";\n\n $display-font-weight: 300;\n $display-line-height: $headings-line-height;\n\n $lead-font-size: $font-size-base * 1.25;\n $lead-font-weight: 300;\n\n $small-font-size: $font-size-base * 0.875; // 0.875em;\n\n $sub-sup-font-size: $font-size-base * 0.75; // 0.75em;\n\n $text-muted: $gray-600;\n\n $initialism-font-size: $small-font-size;\n\n $blockquote-margin-y: $spacer;\n $blockquote-font-size: $font-size-base * 1.25;\n $blockquote-footer-color: $gray-600;\n $blockquote-footer-font-size: $small-font-size;\n\n $hr-margin-y: $spacer;\n $hr-color: inherit;\n $hr-bg-color: currentColor;\n $hr-border-width: 0;\n $hr-height: $border-width;\n $hr-opacity: 0.25;\n\n $legend-margin-bottom: 0.5rem;\n $legend-font-size: 1.5rem;\n $legend-font-weight: null;\n\n $mark-padding: $font-size-base * 0.2; // 0.2em;\n\n $dt-font-weight: $font-weight-bold;\n\n $nested-kbd-font-weight: $font-weight-bold;\n\n $list-inline-padding: 0.5rem;\n\n $mark-bg: #fcf8e3;\n\n // ...\n\n // Buttons + Forms\n //\n // Shared variables that are reassigned to \"$input-\" and \"$btn-\" specific variables.\n\n $input-btn-padding-y: 0.375rem;\n $input-btn-padding-x: 0.75rem;\n $input-btn-font-family: null;\n $input-btn-font-size: $font-size-base;\n $input-btn-line-height: $line-height-base;\n\n $input-btn-focus-width: 0.25rem;\n $input-btn-focus-color-opacity: 0.25;\n $input-btn-focus-color: rgba(\n $component-active-bg,\n $input-btn-focus-color-opacity\n );\n $input-btn-focus-blur: 0;\n $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width\n $input-btn-focus-color;\n\n $input-btn-padding-y-sm: 0.25rem;\n $input-btn-padding-x-sm: 0.5rem;\n $input-btn-font-size-sm: $font-size-sm;\n\n $input-btn-padding-y-lg: 0.5rem;\n $input-btn-padding-x-lg: 1rem;\n $input-btn-font-size-lg: $font-size-lg;\n\n $input-btn-border-width: $border-width;\n\n // Buttons\n //\n // For each of Bootstrap's buttons, define text, background, and border color.\n\n $btn-padding-y: $input-btn-padding-y;\n $btn-padding-x: $input-btn-padding-x;\n $btn-font-family: $input-btn-font-family;\n $btn-font-size: $input-btn-font-size;\n $btn-line-height: $input-btn-line-height;\n $btn-white-space: null; // Set to \"nowrap\" to prevent text wrapping\n\n $btn-padding-y-sm: $input-btn-padding-y-sm;\n $btn-padding-x-sm: $input-btn-padding-x-sm;\n $btn-font-size-sm: $input-btn-font-size-sm;\n\n $btn-padding-y-lg: $input-btn-padding-y-lg;\n $btn-padding-x-lg: $input-btn-padding-x-lg;\n $btn-font-size-lg: $input-btn-font-size-lg;\n\n $btn-border-width: $input-btn-border-width;\n\n $btn-font-weight: $font-weight-normal;\n $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15),\n 0 1px 1px rgba($black, 0.075);\n $btn-focus-width: $input-btn-focus-width;\n $btn-focus-box-shadow: $input-btn-focus-box-shadow;\n $btn-disabled-opacity: 0.65;\n $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);\n\n $btn-link-color: $link-color;\n $btn-link-hover-color: $link-hover-color;\n $btn-link-disabled-color: $gray-600;\n\n // Allows for customizing button radius independently from global border radius\n $btn-border-radius: $border-radius;\n $btn-border-radius-sm: $border-radius-sm;\n $btn-border-radius-lg: $border-radius-lg;\n\n $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n $btn-hover-bg-shade-amount: 0.15; // 15%;\n $btn-hover-bg-tint-amount: 0.15; // 15%;\n $btn-hover-border-shade-amount: 0.2; // 20%;\n $btn-hover-border-tint-amount: 0.1; // 10%;\n $btn-active-bg-shade-amount: 0.2; // 20%;\n $btn-active-bg-tint-amount: 0.2; // 20%;\n $btn-active-border-shade-amount: 0.25; // 25%;\n $btn-active-border-tint-amount: 0.1; // 10%;\n\n // Forms\n\n $form-text-margin-top: 0.25rem;\n $form-text-font-size: $small-font-size;\n $form-text-font-style: null;\n $form-text-font-weight: null;\n $form-text-color: $text-muted;\n\n $form-label-margin-bottom: 0.5rem;\n $form-label-font-size: null;\n $form-label-font-style: null;\n $form-label-font-weight: null;\n $form-label-color: null;\n\n $input-padding-y: $input-btn-padding-y;\n $input-padding-x: $input-btn-padding-x;\n $input-font-family: $input-btn-font-family;\n $input-font-size: $input-btn-font-size;\n $input-font-weight: $font-weight-base;\n $input-line-height: $input-btn-line-height;\n\n $input-padding-y-sm: $input-btn-padding-y-sm;\n $input-padding-x-sm: $input-btn-padding-x-sm;\n $input-font-size-sm: $input-btn-font-size-sm;\n\n $input-padding-y-lg: $input-btn-padding-y-lg;\n $input-padding-x-lg: $input-btn-padding-x-lg;\n $input-font-size-lg: $input-btn-font-size-lg;\n\n $input-bg: $body-bg;\n $input-disabled-bg: $gray-200;\n $input-disabled-border-color: null;\n\n $input-color: $body-color;\n $input-border-color: $gray-400;\n $input-border-width: $input-btn-border-width;\n $input-box-shadow: $box-shadow-inset;\n\n $input-border-radius: $border-radius;\n $input-border-radius-sm: $border-radius-sm;\n $input-border-radius-lg: $border-radius-lg;\n\n $input-focus-bg: $input-bg;\n $input-focus-border-color: ", ";\n $input-focus-color: $input-color;\n $input-focus-width: $input-btn-focus-width;\n $input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n $input-placeholder-color: $gray-600;\n $input-plaintext-color: $body-color;\n\n $input-height-border: $input-border-width * 2;\n\n $input-height-inner: ", ";\n $input-height-inner-half: ", ";\n $input-height-inner-quarter: ", ";\n\n $input-height: ", ";\n $input-height-sm: ", ";\n $input-height-lg: ", ";\n\n $input-transition: border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n\n $form-color-width: 3rem;\n\n $form-check-input-width: $font-size-base * 1; // 1em;\n $form-check-min-height: $font-size-base * $line-height-base;\n $form-check-padding-start: $form-check-input-width + 0.5rem; // 0.5em;\n $form-check-margin-bottom: 0.125rem;\n $form-check-label-color: null;\n $form-check-label-cursor: null;\n $form-check-transition: null;\n\n $form-check-input-active-filter: brightness(90%);\n\n $form-check-input-bg: $input-bg;\n $form-check-input-border: 1px solid rgba($black, 0.25);\n $form-check-input-border-radius: $font-size-base * 0.25; // 0.25em;\n $form-check-radio-border-radius: 50px; // 50%;\n $form-check-input-focus-border: $input-focus-border-color;\n $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n $form-check-input-checked-color: $component-active-color;\n $form-check-input-checked-bg-color: $component-active-bg;\n $form-check-input-checked-border-color: $form-check-input-checked-bg-color;\n $form-check-input-checked-bg-image: ", ";\n $form-check-radio-checked-bg-image: ", ";\n\n $form-check-input-indeterminate-color: $component-active-color;\n $form-check-input-indeterminate-bg-color: $component-active-bg;\n $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;\n $form-check-input-indeterminate-bg-image: ", ";\n\n $form-check-input-disabled-opacity: 0.5;\n $form-check-label-disabled-opacity: $form-check-input-disabled-opacity;\n $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;\n\n $form-check-inline-margin-end: 1rem;\n\n $form-switch-color: rgba($black, 0.25);\n $form-switch-width: 2rem;\n $form-switch-padding-start: $form-switch-width + 0.5rem;\n $form-switch-bg-image: ", ";\n $form-switch-border-radius: $form-switch-width;\n $form-switch-transition: background-position 0.15s ease-in-out;\n\n $form-switch-focus-color: $input-focus-border-color;\n $form-switch-focus-bg-image: ", ";\n\n $form-switch-checked-color: $component-active-color;\n $form-switch-checked-bg-image: ", ";\n $form-switch-checked-bg-position: right center;\n\n $input-group-addon-padding-y: $input-padding-y;\n $input-group-addon-padding-x: $input-padding-x;\n $input-group-addon-font-weight: $input-font-weight;\n $input-group-addon-color: $input-color;\n $input-group-addon-bg: $gray-200;\n $input-group-addon-border-color: $input-border-color;\n\n $form-select-padding-y: $input-padding-y;\n $form-select-padding-x: $input-padding-x;\n $form-select-font-family: $input-font-family;\n $form-select-font-size: $input-font-size;\n $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image\n $form-select-font-weight: $input-font-weight;\n $form-select-line-height: $input-line-height;\n $form-select-color: $input-color;\n $form-select-bg: $input-bg;\n $form-select-disabled-color: null;\n $form-select-disabled-bg: $gray-200;\n $form-select-disabled-border-color: $input-disabled-border-color;\n $form-select-bg-position: right $form-select-padding-x center;\n $form-select-bg-size: 16px 12px; // In pixels because image dimensions\n $form-select-indicator-color: $gray-800;\n $form-select-indicator: ", ";\n\n $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +\n $form-select-indicator-padding;\n $form-select-feedback-icon-position: center right\n $form-select-indicator-padding;\n $form-select-feedback-icon-size: $input-height-inner-half\n $input-height-inner-half;\n\n $form-select-border-width: $input-border-width;\n $form-select-border-color: $input-border-color;\n $form-select-border-radius: $input-border-radius;\n $form-select-box-shadow: $box-shadow-inset;\n\n $form-select-focus-border-color: $input-focus-border-color;\n $form-select-focus-width: $input-focus-width;\n $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width\n $input-btn-focus-color;\n\n $form-select-padding-y-sm: $input-padding-y-sm;\n $form-select-padding-x-sm: $input-padding-x-sm;\n $form-select-font-size-sm: $input-font-size-sm;\n $form-select-border-radius-sm: $input-border-radius-sm;\n\n $form-select-padding-y-lg: $input-padding-y-lg;\n $form-select-padding-x-lg: $input-padding-x-lg;\n $form-select-font-size-lg: $input-font-size-lg;\n $form-select-border-radius-lg: $input-border-radius-lg;\n\n $form-select-transition: $input-transition;\n\n $form-range-track-width: 100%;\n $form-range-track-height: 0.5rem;\n $form-range-track-cursor: pointer;\n $form-range-track-bg: $gray-300;\n $form-range-track-border-radius: 1rem;\n $form-range-track-box-shadow: $box-shadow-inset;\n\n $form-range-thumb-width: 1rem;\n $form-range-thumb-height: $form-range-thumb-width;\n $form-range-thumb-bg: $component-active-bg;\n $form-range-thumb-border: 0;\n $form-range-thumb-border-radius: 1rem;\n $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);\n $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,\n $input-focus-box-shadow;\n $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge\n $form-range-thumb-active-bg: tint-color($component-active-bg, 70%);\n $form-range-thumb-disabled-bg: $gray-500;\n $form-range-thumb-transition: background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n $form-file-button-color: $input-color;\n $form-file-button-bg: $input-group-addon-bg;\n $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);\n\n $form-floating-height: ", ";\n $form-floating-line-height: 1.25;\n $form-floating-padding-x: $input-padding-x;\n $form-floating-padding-y: 1rem;\n $form-floating-input-padding-t: 1.625rem;\n $form-floating-input-padding-b: 0.625rem;\n $form-floating-label-opacity: 0.65;\n $form-floating-label-transform: scale(0.85) translateY(-0.5rem)\n translateX(0.15rem);\n $form-floating-transition: opacity 0.1s ease-in-out,\n transform 0.1s ease-in-out;\n\n // Form validation\n\n $form-feedback-margin-top: $form-text-margin-top;\n $form-feedback-font-size: $form-text-font-size;\n $form-feedback-font-style: $form-text-font-style;\n $form-feedback-valid-color: $success;\n $form-feedback-invalid-color: $danger;\n\n $form-feedback-icon-valid-color: $form-feedback-valid-color;\n $form-feedback-icon-valid: ", ";\n $form-feedback-icon-invalid-color: $form-feedback-invalid-color;\n $form-feedback-icon-invalid: ", ";\n\n $form-validation-states: ", ";\n\n // Z-index master list\n //\n // Warning: Avoid customizing these values. They're used for a bird's eye view\n // of components dependent on the z-axis and are designed to all work together.\n\n $zindex-dropdown: 1000;\n $zindex-sticky: 1020;\n $zindex-fixed: 1030;\n $zindex-offcanvas-backdrop: 1040;\n $zindex-offcanvas: 1045;\n $zindex-modal-backdrop: 1050;\n $zindex-modal: 1055;\n $zindex-popover: 1070;\n $zindex-tooltip: 1080;\n\n // Navs\n\n $nav-link-padding-y: 0.5rem;\n $nav-link-padding-x: 1rem;\n $nav-link-font-size: null;\n $nav-link-font-weight: null;\n $nav-link-color: $link-color;\n $nav-link-hover-color: $link-hover-color;\n $nav-link-transition: color 0.15s ease-in-out,\n background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n $nav-link-disabled-color: $gray-600;\n\n $nav-tabs-border-color: $gray-300;\n $nav-tabs-border-width: $border-width;\n $nav-tabs-border-radius: $border-radius;\n $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n $nav-tabs-link-active-color: $gray-700;\n $nav-tabs-link-active-bg: $body-bg;\n $nav-tabs-link-active-border-color: $gray-300 $gray-300\n $nav-tabs-link-active-bg;\n\n $nav-pills-border-radius: $border-radius;\n $nav-pills-link-active-color: $component-active-color;\n $nav-pills-link-active-bg: $component-active-bg;\n\n // Navbar\n\n $navbar-padding-y: $spacer * 0.5;\n $navbar-padding-x: null;\n\n $navbar-nav-link-padding-x: 0.5rem;\n\n $navbar-brand-font-size: $font-size-lg;\n\n $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y *\n 2;\n $navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n $navbar-brand-padding-y-intermediate-result: $nav-link-height -\n $navbar-brand-height;\n $navbar-brand-padding-y: $navbar-brand-padding-y-intermediate-result * 0.5;\n $navbar-brand-margin-end: 1rem;\n\n $navbar-toggler-padding-y: 0.25rem;\n $navbar-toggler-padding-x: 0.75rem;\n $navbar-toggler-font-size: $font-size-lg;\n $navbar-toggler-border-radius: $btn-border-radius;\n $navbar-toggler-focus-width: $btn-focus-width;\n $navbar-toggler-transition: box-shadow 0.15s ease-in-out;\n\n $navbar-dark-color: rgba($white, 0.55);\n $navbar-dark-hover-color: rgba($white, 0.75);\n $navbar-dark-active-color: $white;\n $navbar-dark-disabled-color: rgba($white, 0.25);\n $navbar-dark-toggler-icon-bg: ", ";\n $navbar-dark-toggler-border-color: rgba($white, 0.1);\n\n $navbar-light-color: rgba($black, 0.55);\n $navbar-light-hover-color: rgba($black, 0.7);\n $navbar-light-active-color: rgba($black, 0.9);\n $navbar-light-disabled-color: rgba($black, 0.3);\n $navbar-light-toggler-icon-bg: ", ";\n $navbar-light-toggler-border-color: rgba($black, 0.1);\n\n $navbar-light-brand-color: $navbar-light-active-color;\n $navbar-light-brand-hover-color: $navbar-light-active-color;\n $navbar-dark-brand-color: $navbar-dark-active-color;\n $navbar-dark-brand-hover-color: $navbar-dark-active-color;\n\n // Dropdowns\n //\n // Dropdown menu container and contents.\n\n $dropdown-min-width: 10rem;\n $dropdown-padding-x: 0;\n $dropdown-padding-y: 0.5rem;\n $dropdown-spacer: 0.125rem;\n $dropdown-font-size: $font-size-base;\n $dropdown-color: $body-color;\n $dropdown-bg: $white;\n $dropdown-border-color: rgba($black, 0.15);\n $dropdown-border-radius: $border-radius;\n $dropdown-border-width: $border-width;\n $dropdown-inner-border-radius: subtract(\n $dropdown-border-radius,\n $dropdown-border-width\n );\n $dropdown-divider-bg: $dropdown-border-color;\n $dropdown-divider-margin-y: $spacer * 0.5;\n $dropdown-box-shadow: $box-shadow;\n\n $dropdown-link-color: $gray-900;\n\n $dropdown-link-hover-color: ", ";\n $dropdown-link-hover-bg: $gray-200;\n\n $dropdown-link-active-color: $component-active-color;\n $dropdown-link-active-bg: $component-active-bg;\n\n $dropdown-link-disabled-color: $gray-500;\n\n $dropdown-item-padding-y: $spacer * 0.25;\n $dropdown-item-padding-x: $spacer;\n\n $dropdown-header-color: $gray-600;\n $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;\n\n $dropdown-dark-color: $gray-300;\n $dropdown-dark-bg: $gray-800;\n $dropdown-dark-border-color: $dropdown-border-color;\n $dropdown-dark-divider-bg: $dropdown-divider-bg;\n $dropdown-dark-box-shadow: null;\n $dropdown-dark-link-color: $dropdown-dark-color;\n $dropdown-dark-link-hover-color: $white;\n $dropdown-dark-link-hover-bg: rgba($white, 0.15);\n $dropdown-dark-link-active-color: $dropdown-link-active-color;\n $dropdown-dark-link-active-bg: $dropdown-link-active-bg;\n $dropdown-dark-link-disabled-color: $gray-500;\n $dropdown-dark-header-color: $gray-500;\n\n // ...\n\n // Cards\n\n $card-spacer-y: $spacer;\n $card-spacer-x: $spacer;\n $card-title-spacer-y: $spacer * 0.5;\n $card-border-width: $border-width;\n $card-border-color: rgba($black, 0.125);\n $card-border-radius: $border-radius;\n $card-box-shadow: null;\n $card-inner-border-radius: ", ";\n $card-cap-padding-y: $card-spacer-y * 0.5;\n $card-cap-padding-x: $card-spacer-x;\n $card-cap-bg: rgba($black, 0.03);\n $card-cap-color: null;\n $card-height: null;\n $card-color: null;\n $card-bg: $white;\n $card-img-overlay-padding: $spacer;\n $card-group-margin: $grid-gutter-width * 0.5;\n\n // ...\n\n // Tooltips\n\n $tooltip-font-size: $font-size-sm;\n $tooltip-max-width: 200px;\n $tooltip-color: $white;\n $tooltip-bg: $black;\n $tooltip-border-radius: $border-radius;\n $tooltip-opacity: 0.9;\n $tooltip-padding-y: $spacer * 0.25;\n $tooltip-padding-x: $spacer * 0.5;\n $tooltip-margin: 0;\n\n $tooltip-arrow-width: 0.8rem;\n $tooltip-arrow-height: 0.4rem;\n $tooltip-arrow-color: $tooltip-bg;\n\n // Popovers\n\n $popover-font-size: $font-size-sm;\n $popover-bg: $white;\n $popover-max-width: 276px;\n $popover-border-width: $border-width;\n $popover-border-color: rgba($black, 0.2);\n $popover-border-radius: $border-radius-lg;\n $popover-inner-border-radius: ", ";\n $popover-box-shadow: $box-shadow;\n\n $popover-header-bg: ", ";\n $popover-header-color: $headings-color;\n $popover-header-padding-y: 0.5rem;\n $popover-header-padding-x: $spacer;\n\n $popover-body-color: $body-color;\n $popover-body-padding-y: $spacer;\n $popover-body-padding-x: $spacer;\n\n $popover-arrow-width: 1rem;\n $popover-arrow-height: 0.5rem;\n $popover-arrow-color: $popover-bg;\n\n $popover-arrow-outer-color: $popover-border-color;\n\n // Toasts\n\n $toast-max-width: 350px;\n $toast-padding-x: 0.75rem;\n $toast-padding-y: 0.5rem;\n $toast-font-size: 0.875rem;\n $toast-color: null;\n $toast-background-color: rgba($white, 0.85);\n $toast-border-width: 1px;\n $toast-border-color: rgba($black, 0.1);\n $toast-border-radius: $border-radius;\n $toast-box-shadow: $box-shadow;\n $toast-spacing: $container-padding-x;\n\n $toast-header-color: $gray-600;\n $toast-header-background-color: rgba($white, 0.85);\n $toast-header-border-color: rgba($black, 0.05);\n\n // Badges\n\n $badge-font-size: $font-size-base * 0.75; // 0.75em;\n $badge-font-weight: $font-weight-bold;\n $badge-color: $white;\n $badge-padding-y: $badge-font-size * 0.35; // 0.35em;\n $badge-padding-x: $badge-font-size * 0.65; // 0.65em;\n $badge-border-radius: $border-radius;\n\n // Modals\n\n $modal-inner-padding: $spacer;\n\n $modal-footer-margin-between: 0.5rem;\n\n $modal-dialog-margin: 0.5rem;\n $modal-dialog-margin-y-sm-up: 1.75rem;\n\n $modal-title-line-height: $line-height-base;\n\n $modal-content-color: null;\n $modal-content-bg: $white;\n $modal-content-border-color: rgba($black, 0.65); // rgba($black, 0.2);\n $modal-content-border-width: $border-width;\n $modal-content-border-radius: $border-radius-lg;\n $modal-content-inner-border-radius: ", ";\n $modal-content-box-shadow-xs: $box-shadow-sm;\n $modal-content-box-shadow-sm-up: $box-shadow;\n\n $modal-backdrop-bg: $black;\n $modal-backdrop-opacity: 0.5;\n $modal-header-border-color: $border-color;\n $modal-footer-border-color: $modal-header-border-color;\n $modal-header-border-width: $modal-content-border-width;\n $modal-footer-border-width: $modal-header-border-width;\n $modal-header-padding-y: $modal-inner-padding;\n $modal-header-padding-x: $modal-inner-padding;\n $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\n\n $modal-sm: 300px;\n $modal-md: 500px;\n $modal-lg: 800px;\n $modal-xl: 1140px;\n\n $modal-fade-transform: translate(0, -50px);\n $modal-show-transform: none;\n $modal-transition: transform 0.3s ease-out;\n $modal-scale-transform: scale(1.02);\n\n // ...\n\n // Alerts\n //\n // Define alert colors, border radius, and padding.\n\n $alert-padding-y: $spacer;\n $alert-padding-x: $spacer;\n $alert-margin-bottom: 1rem;\n $alert-border-radius: $border-radius;\n $alert-link-font-weight: $font-weight-bold;\n $alert-border-width: $border-width;\n $alert-bg-scale: -0.8; // 80%;\n $alert-border-scale: -0.7; // 70%;\n $alert-color-scale: 0.4; // 40%;\n $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side\n\n // Progress bars\n\n $progress-height: 1rem;\n $progress-font-size: $font-size-base * 0.75;\n $progress-bg: $gray-200;\n $progress-border-radius: $border-radius;\n $progress-box-shadow: $box-shadow-inset;\n $progress-bar-color: $white;\n $progress-bar-bg: $primary;\n $progress-bar-animation-timing: 1s linear infinite;\n $progress-bar-transition: width 0.6s ease;\n\n // List group\n\n $list-group-color: $gray-900;\n $list-group-bg: $white;\n $list-group-border-color: rgba($black, 0.125);\n $list-group-border-width: $border-width;\n $list-group-border-radius: $border-radius;\n\n $list-group-item-padding-y: $spacer * 0.5;\n $list-group-item-padding-x: $spacer;\n $list-group-item-bg-scale: -0.8; // 80%;\n $list-group-item-color-scale: 0.4; // 40%;\n\n $list-group-hover-bg: $gray-100;\n $list-group-active-color: $component-active-color;\n $list-group-active-bg: $component-active-bg;\n $list-group-active-border-color: $list-group-active-bg;\n\n $list-group-disabled-color: $gray-600;\n $list-group-disabled-bg: $list-group-bg;\n\n $list-group-action-color: $gray-700;\n $list-group-action-hover-color: $list-group-action-color;\n\n $list-group-action-active-color: $body-color;\n $list-group-action-active-bg: $gray-200;\n\n // Close\n\n $btn-close-width: $font-size-base * 1; // 1em;\n $btn-close-height: $btn-close-width;\n $btn-close-padding-x: $font-size-base * 0.25; // .25em;\n $btn-close-padding-y: $btn-close-padding-x;\n $btn-close-color: $black;\n $btn-close-bg: ", ";\n $btn-close-focus-shadow: $input-btn-focus-box-shadow;\n $btn-close-opacity: 0.5;\n $btn-close-hover-opacity: 0.75;\n $btn-close-focus-opacity: 1;\n $btn-close-disabled-opacity: 0.25;\n // $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);\n\n // Offcanvas\n\n $offcanvas-padding-y: $modal-inner-padding;\n $offcanvas-padding-x: $modal-inner-padding;\n $offcanvas-horizontal-width: 400px;\n $offcanvas-vertical-height: 200px; // 30vh;\n $offcanvas-transition-duration: 0.3s;\n $offcanvas-border-color: $modal-content-border-color;\n $offcanvas-border-width: $modal-content-border-width;\n $offcanvas-title-line-height: $modal-title-line-height;\n $offcanvas-bg-color: $modal-content-bg;\n $offcanvas-color: $modal-content-color;\n $offcanvas-box-shadow: $modal-content-box-shadow-xs;\n $offcanvas-backdrop-bg: $modal-backdrop-bg;\n $offcanvas-backdrop-opacity: $modal-backdrop-opacity;\n\n // Code\n\n $code-font-size: $small-font-size;\n $code-color: $pink;\n\n $kbd-padding-y: 0.2rem;\n $kbd-padding-x: 0.4rem;\n $kbd-font-size: $code-font-size;\n $kbd-color: $white;\n $kbd-bg: $gray-900;\n\n $pre-color: null;\n"])), function (t) {
|
|
2187
|
+
var variables = css(_templateObject$12 || (_templateObject$12 = _taggedTemplateLiteral(["\n // Color system\n\n $white: #fff;\n $gray-100: #f8f9fa;\n $gray-200: #e9ecef;\n $gray-300: #dee2e6;\n $gray-400: #ced4da;\n $gray-500: #adb5bd;\n $gray-600: #6c757d;\n $gray-700: #495057;\n $gray-800: #343a40;\n $gray-900: #212529;\n $black: #000;\n\n $grays: ", ";\n\n $blue: #0d6efd;\n $indigo: #6610f2;\n $purple: #6f42c1;\n $pink: #d63384;\n $red: #dc3545;\n $orange: #fd7e14;\n $yellow: #ffc107;\n $green: #198754;\n $teal: #20c997;\n $cyan: #0dcaf0;\n\n $colors: ", ";\n\n $primary: $blue;\n $secondary: $gray-600;\n $success: $green;\n $info: $cyan;\n $warning: $yellow;\n $danger: $red;\n $light: $gray-100;\n $dark: $gray-900;\n\n $theme-colors: ", ";\n\n // The contrast ratio to reach against white, to determine if color changes from \"light\" to \"dark\". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.\n // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast\n $min-contrast-ratio: 4.5;\n\n // Customize the light and dark text colors for use in our color contrast function.\n $color-contrast-dark: $black;\n $color-contrast-light: $white;\n\n $blue-100: tint-color($blue, 80%);\n $blue-200: tint-color($blue, 60%);\n $blue-300: tint-color($blue, 40%);\n $blue-400: tint-color($blue, 20%);\n $blue-500: $blue;\n $blue-600: shade-color($blue, 20%);\n $blue-700: shade-color($blue, 40%);\n $blue-800: shade-color($blue, 60%);\n $blue-900: shade-color($blue, 80%);\n\n $indigo-100: tint-color($indigo, 80%);\n $indigo-200: tint-color($indigo, 60%);\n $indigo-300: tint-color($indigo, 40%);\n $indigo-400: tint-color($indigo, 20%);\n $indigo-500: $indigo;\n $indigo-600: shade-color($indigo, 20%);\n $indigo-700: shade-color($indigo, 40%);\n $indigo-800: shade-color($indigo, 60%);\n $indigo-900: shade-color($indigo, 80%);\n\n $purple-100: tint-color($purple, 80%);\n $purple-200: tint-color($purple, 60%);\n $purple-300: tint-color($purple, 40%);\n $purple-400: tint-color($purple, 20%);\n $purple-500: $purple;\n $purple-600: shade-color($purple, 20%);\n $purple-700: shade-color($purple, 40%);\n $purple-800: shade-color($purple, 60%);\n $purple-900: shade-color($purple, 80%);\n\n $pink-100: tint-color($pink, 80%);\n $pink-200: tint-color($pink, 60%);\n $pink-300: tint-color($pink, 40%);\n $pink-400: tint-color($pink, 20%);\n $pink-500: $pink;\n $pink-600: shade-color($pink, 20%);\n $pink-700: shade-color($pink, 40%);\n $pink-800: shade-color($pink, 60%);\n $pink-900: shade-color($pink, 80%);\n\n $red-100: tint-color($red, 80%);\n $red-200: tint-color($red, 60%);\n $red-300: tint-color($red, 40%);\n $red-400: tint-color($red, 20%);\n $red-500: $red;\n $red-600: shade-color($red, 20%);\n $red-700: shade-color($red, 40%);\n $red-800: shade-color($red, 60%);\n $red-900: shade-color($red, 80%);\n\n $orange-100: tint-color($orange, 80%);\n $orange-200: tint-color($orange, 60%);\n $orange-300: tint-color($orange, 40%);\n $orange-400: tint-color($orange, 20%);\n $orange-500: $orange;\n $orange-600: shade-color($orange, 20%);\n $orange-700: shade-color($orange, 40%);\n $orange-800: shade-color($orange, 60%);\n $orange-900: shade-color($orange, 80%);\n\n $yellow-100: tint-color($yellow, 80%);\n $yellow-200: tint-color($yellow, 60%);\n $yellow-300: tint-color($yellow, 40%);\n $yellow-400: tint-color($yellow, 20%);\n $yellow-500: $yellow;\n $yellow-600: shade-color($yellow, 20%);\n $yellow-700: shade-color($yellow, 40%);\n $yellow-800: shade-color($yellow, 60%);\n $yellow-900: shade-color($yellow, 80%);\n\n $green-100: tint-color($green, 80%);\n $green-200: tint-color($green, 60%);\n $green-300: tint-color($green, 40%);\n $green-400: tint-color($green, 20%);\n $green-500: $green;\n $green-600: shade-color($green, 20%);\n $green-700: shade-color($green, 40%);\n $green-800: shade-color($green, 60%);\n $green-900: shade-color($green, 80%);\n\n $teal-100: tint-color($teal, 80%);\n $teal-200: tint-color($teal, 60%);\n $teal-300: tint-color($teal, 40%);\n $teal-400: tint-color($teal, 20%);\n $teal-500: $teal;\n $teal-600: shade-color($teal, 20%);\n $teal-700: shade-color($teal, 40%);\n $teal-800: shade-color($teal, 60%);\n $teal-900: shade-color($teal, 80%);\n\n $cyan-100: tint-color($cyan, 80%);\n $cyan-200: tint-color($cyan, 60%);\n $cyan-300: tint-color($cyan, 40%);\n $cyan-400: tint-color($cyan, 20%);\n $cyan-500: $cyan;\n $cyan-600: shade-color($cyan, 20%);\n $cyan-700: shade-color($cyan, 40%);\n $cyan-800: shade-color($cyan, 60%);\n $cyan-900: shade-color($cyan, 80%);\n\n $blues: ", ";\n\n $indigos: ", ";\n\n $purples: ", ";\n\n $pinks: ", ";\n\n $reds: ", ";\n\n $oranges: ", ";\n\n $yellows: ", ";\n\n $greens: ", ";\n\n $teals: ", ";\n\n $cyans: ", ";\n\n // Characters which are escaped by the escape-svg function\n // $escaped characters\n\n // Options\n //\n // Quickly modify global styling by enabling or disabling optional features.\n\n // NOTE: Handled by JavaScript.\n\n // Gradient\n //\n // The gradient which is added to components if \"$enable-gradients\" is \"true\"\n // This gradient is also added to elements with \".bg-gradient\"\n $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0));\n\n // Spacing\n //\n // Control the default styling of most Bootstrap elements by modifying these\n // variables. Mostly focused on spacing.\n // You can add more entries to the $spacers map, should you need more variation.\n\n $spacer: 1rem;\n $spacers: ", ";\n\n // Position\n //\n // Define the edge positioning anchors of the position utilities.\n\n $position-values: ", ";\n\n // Body\n //\n // Settings for the \"<body>\" element.\n\n $body-bg: $white;\n $body-color: $gray-900;\n $body-text-align: null;\n\n // Links\n //\n // Style anchor elements.\n\n $link-color: $primary;\n $link-decoration: underline;\n $link-shade-percentage: 0.2; // 20%;\n $link-hover-color: ", ";\n $link-hover-decoration: null;\n\n $stretched-link-pseudo-element: after;\n $stretched-link-z-index: 1;\n\n // Paragraphs\n //\n // Style p element.\n\n $paragraph-margin-bottom: 1rem;\n\n // Grid breakpoints\n //\n // Define the minimum dimensions at which your layout will change,\n // adapting to different screen sizes, for use in media queries.\n\n $grid-breakpoints: ", ";\n\n // Grid containers\n //\n // Define the maximum width of \".container\" for different screen sizes.\n\n $container-max-widths: ", ";\n\n // Grid columns\n //\n // Set the number of columns and specify the width of the gutters.\n\n // $grid-columns: 12;\n $grid-gutter-width: 1.5rem;\n // $grid-row-columns: 6;\n\n // Container padding\n\n $container-padding-x: $grid-gutter-width * 0.5;\n\n // Components\n //\n // Define common padding and border radius sizes and more.\n\n $border-width: 1px;\n $border-widths: ", ";\n\n $border-color: $gray-300;\n\n $border-radius: 0.25rem;\n $border-radius-sm: 0.2rem;\n $border-radius-lg: 0.3rem;\n $border-radius-pill: 50rem;\n\n $box-shadow: 0 0.5rem 1rem rgba($black, 0.15);\n $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075);\n $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175);\n $box-shadow-inset: inset 0 1px 2px rgba($black, 0.075);\n\n $component-active-color: $white;\n $component-active-bg: $primary;\n\n $caret-width: 0.3em;\n $caret-vertical-align: $caret-width * 0.85;\n $caret-spacing: $caret-width * 0.85;\n\n $transition-base: all 0.2s ease-in-out;\n $transition-fade: opacity 0.15s linear;\n $transition-collapse: height 0.35s ease;\n $transition-collapse-width: width 0.35s ease;\n\n $aspect-ratios: ", ";\n\n // Typography\n //\n // Font, line-height, and color for body text, headings, and more.\n\n $font-family-sans-serif: ", ";\n $font-family-monospace: ", ";\n $font-family-base: $font-family-sans-serif;\n $font-family-code: $font-family-monospace;\n\n // $font-size-root affects the value of \"rem\", which is used for as well font sizes, paddings, and margins\n // $font-size-base affects the font size of the body text\n $font-size-root: null;\n $font-size-base: 1rem; // Assumes the browser default, typically \"16px\"\n $font-size-sm: $font-size-base * 0.875;\n $font-size-lg: $font-size-base * 1.25;\n\n $font-weight-lighter: 300; // lighter;\n $font-weight-light: 300;\n $font-weight-normal: 400;\n $font-weight-bold: 700;\n $font-weight-bolder: 500; // bolder;\n\n $font-weight-base: $font-weight-normal;\n\n $line-height-base: 1.5;\n $line-height-sm: 1.25;\n $line-height-lg: 2;\n\n $h1-font-size: $font-size-base * 2.5;\n $h2-font-size: $font-size-base * 2;\n $h3-font-size: $font-size-base * 1.75;\n $h4-font-size: $font-size-base * 1.5;\n $h5-font-size: $font-size-base * 1.25;\n $h6-font-size: $font-size-base;\n\n $font-sizes: ", ";\n\n $headings-margin-bottom: $spacer * 0.5;\n $headings-font-family: null;\n $headings-font-style: null;\n $headings-font-weight: 500;\n $headings-line-height: 1.2;\n $headings-color: null;\n\n $display-font-sizes: ", ";\n\n $display-font-weight: 300;\n $display-line-height: $headings-line-height;\n\n $lead-font-size: $font-size-base * 1.25;\n $lead-font-weight: 300;\n\n $small-font-size: $font-size-base * 0.875; // 0.875em;\n\n $sub-sup-font-size: $font-size-base * 0.75; // 0.75em;\n\n $text-muted: $gray-600;\n\n $initialism-font-size: $small-font-size;\n\n $blockquote-margin-y: $spacer;\n $blockquote-font-size: $font-size-base * 1.25;\n $blockquote-footer-color: $gray-600;\n $blockquote-footer-font-size: $small-font-size;\n\n $hr-margin-y: $spacer;\n $hr-color: inherit;\n $hr-bg-color: currentColor;\n $hr-border-width: 0;\n $hr-height: $border-width;\n $hr-opacity: 0.25;\n\n $legend-margin-bottom: 0.5rem;\n $legend-font-size: 1.5rem;\n $legend-font-weight: null;\n\n $mark-padding: $font-size-base * 0.2; // 0.2em;\n\n $dt-font-weight: $font-weight-bold;\n\n $nested-kbd-font-weight: $font-weight-bold;\n\n $list-inline-padding: 0.5rem;\n\n $mark-bg: #fcf8e3;\n\n // ...\n\n // Buttons + Forms\n //\n // Shared variables that are reassigned to \"$input-\" and \"$btn-\" specific variables.\n\n $input-btn-padding-y: 0.375rem;\n $input-btn-padding-x: 0.75rem;\n $input-btn-font-family: null;\n $input-btn-font-size: $font-size-base;\n $input-btn-line-height: $line-height-base;\n\n $input-btn-focus-width: 0.25rem;\n $input-btn-focus-color-opacity: 0.25;\n $input-btn-focus-color: rgba(\n $component-active-bg,\n $input-btn-focus-color-opacity\n );\n $input-btn-focus-blur: 0;\n $input-btn-focus-box-shadow: 0 0 $input-btn-focus-blur $input-btn-focus-width\n $input-btn-focus-color;\n\n $input-btn-padding-y-sm: 0.25rem;\n $input-btn-padding-x-sm: 0.5rem;\n $input-btn-font-size-sm: $font-size-sm;\n\n $input-btn-padding-y-lg: 0.5rem;\n $input-btn-padding-x-lg: 1rem;\n $input-btn-font-size-lg: $font-size-lg;\n\n $input-btn-border-width: $border-width;\n\n // Buttons\n //\n // For each of Bootstrap's buttons, define text, background, and border color.\n\n $btn-padding-y: $input-btn-padding-y;\n $btn-padding-x: $input-btn-padding-x;\n $btn-font-family: $input-btn-font-family;\n $btn-font-size: $input-btn-font-size;\n $btn-line-height: $input-btn-line-height;\n $btn-white-space: null; // Set to \"nowrap\" to prevent text wrapping\n\n $btn-padding-y-sm: $input-btn-padding-y-sm;\n $btn-padding-x-sm: $input-btn-padding-x-sm;\n $btn-font-size-sm: $input-btn-font-size-sm;\n\n $btn-padding-y-lg: $input-btn-padding-y-lg;\n $btn-padding-x-lg: $input-btn-padding-x-lg;\n $btn-font-size-lg: $input-btn-font-size-lg;\n\n $btn-border-width: $input-btn-border-width;\n\n $btn-font-weight: $font-weight-normal;\n $btn-box-shadow: inset 0 1px 0 rgba($white, 0.15),\n 0 1px 1px rgba($black, 0.075);\n $btn-focus-width: $input-btn-focus-width;\n $btn-focus-box-shadow: $input-btn-focus-box-shadow;\n $btn-disabled-opacity: 0.65;\n $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);\n\n $btn-link-color: $link-color;\n $btn-link-hover-color: $link-hover-color;\n $btn-link-disabled-color: $gray-600;\n\n // Allows for customizing button radius independently from global border radius\n $btn-border-radius: $border-radius;\n $btn-border-radius-sm: $border-radius-sm;\n $btn-border-radius-lg: $border-radius-lg;\n\n $btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n $btn-hover-bg-shade-amount: 0.15; // 15%;\n $btn-hover-bg-tint-amount: 0.15; // 15%;\n $btn-hover-border-shade-amount: 0.2; // 20%;\n $btn-hover-border-tint-amount: 0.1; // 10%;\n $btn-active-bg-shade-amount: 0.2; // 20%;\n $btn-active-bg-tint-amount: 0.2; // 20%;\n $btn-active-border-shade-amount: 0.25; // 25%;\n $btn-active-border-tint-amount: 0.1; // 10%;\n\n // Forms\n\n $form-text-margin-top: 0.25rem;\n $form-text-font-size: $small-font-size;\n $form-text-font-style: null;\n $form-text-font-weight: null;\n $form-text-color: $text-muted;\n\n $form-label-margin-bottom: 0.5rem;\n $form-label-font-size: null;\n $form-label-font-style: null;\n $form-label-font-weight: null;\n $form-label-color: null;\n\n $input-padding-y: $input-btn-padding-y;\n $input-padding-x: $input-btn-padding-x;\n $input-font-family: $input-btn-font-family;\n $input-font-size: $input-btn-font-size;\n $input-font-weight: $font-weight-base;\n $input-line-height: $input-btn-line-height;\n\n $input-padding-y-sm: $input-btn-padding-y-sm;\n $input-padding-x-sm: $input-btn-padding-x-sm;\n $input-font-size-sm: $input-btn-font-size-sm;\n\n $input-padding-y-lg: $input-btn-padding-y-lg;\n $input-padding-x-lg: $input-btn-padding-x-lg;\n $input-font-size-lg: $input-btn-font-size-lg;\n\n $input-bg: $body-bg;\n $input-disabled-bg: $gray-200;\n $input-disabled-border-color: null;\n\n $input-color: $body-color;\n $input-border-color: $gray-400;\n $input-border-width: $input-btn-border-width;\n $input-box-shadow: $box-shadow-inset;\n\n $input-border-radius: $border-radius;\n $input-border-radius-sm: $border-radius-sm;\n $input-border-radius-lg: $border-radius-lg;\n\n $input-focus-bg: $input-bg;\n $input-focus-border-color: ", ";\n $input-focus-color: $input-color;\n $input-focus-width: $input-btn-focus-width;\n $input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n $input-placeholder-color: $gray-600;\n $input-plaintext-color: $body-color;\n\n $input-height-border: $input-border-width * 2;\n\n $input-height-inner: ", ";\n $input-height-inner-half: ", ";\n $input-height-inner-quarter: ", ";\n\n $input-height: ", ";\n $input-height-sm: ", ";\n $input-height-lg: ", ";\n\n $input-transition: border-color 0.15s ease-in-out,\n box-shadow 0.15s ease-in-out;\n\n $form-color-width: 3rem;\n\n $form-check-input-width: $font-size-base * 1; // 1em;\n $form-check-min-height: $font-size-base * $line-height-base;\n $form-check-padding-start: $form-check-input-width + 0.5rem; // 0.5em;\n $form-check-margin-bottom: 0.125rem;\n $form-check-label-color: null;\n $form-check-label-cursor: null;\n $form-check-transition: null;\n\n $form-check-input-active-filter: brightness(90%);\n\n $form-check-input-bg: $input-bg;\n $form-check-input-border: 1px solid rgba($black, 0.25);\n $form-check-input-border-radius: $font-size-base * 0.25; // 0.25em;\n $form-check-radio-border-radius: 50px; // 50%;\n $form-check-input-focus-border: $input-focus-border-color;\n $form-check-input-focus-box-shadow: $input-btn-focus-box-shadow;\n\n $form-check-input-checked-color: $component-active-color;\n $form-check-input-checked-bg-color: $component-active-bg;\n $form-check-input-checked-border-color: $form-check-input-checked-bg-color;\n $form-check-input-checked-bg-image: ", ";\n $form-check-radio-checked-bg-image: ", ";\n\n $form-check-input-indeterminate-color: $component-active-color;\n $form-check-input-indeterminate-bg-color: $component-active-bg;\n $form-check-input-indeterminate-border-color: $form-check-input-indeterminate-bg-color;\n $form-check-input-indeterminate-bg-image: ", ";\n\n $form-check-input-disabled-opacity: 0.5;\n $form-check-label-disabled-opacity: $form-check-input-disabled-opacity;\n $form-check-btn-check-disabled-opacity: $btn-disabled-opacity;\n\n $form-check-inline-margin-end: 1rem;\n\n $form-switch-color: rgba($black, 0.25);\n $form-switch-width: 2rem;\n $form-switch-padding-start: $form-switch-width + 0.5rem;\n $form-switch-bg-image: ", ";\n $form-switch-border-radius: $form-switch-width;\n $form-switch-transition: background-position 0.15s ease-in-out;\n\n $form-switch-focus-color: $input-focus-border-color;\n $form-switch-focus-bg-image: ", ";\n\n $form-switch-checked-color: $component-active-color;\n $form-switch-checked-bg-image: ", ";\n $form-switch-checked-bg-position: right center;\n\n $input-group-addon-padding-y: $input-padding-y;\n $input-group-addon-padding-x: $input-padding-x;\n $input-group-addon-font-weight: $input-font-weight;\n $input-group-addon-color: $input-color;\n $input-group-addon-bg: $gray-200;\n $input-group-addon-border-color: $input-border-color;\n\n $form-select-padding-y: $input-padding-y;\n $form-select-padding-x: $input-padding-x;\n $form-select-font-family: $input-font-family;\n $form-select-font-size: $input-font-size;\n $form-select-indicator-padding: $form-select-padding-x * 3; // Extra padding for background-image\n $form-select-font-weight: $input-font-weight;\n $form-select-line-height: $input-line-height;\n $form-select-color: $input-color;\n $form-select-bg: $input-bg;\n $form-select-disabled-color: null;\n $form-select-disabled-bg: $gray-200;\n $form-select-disabled-border-color: $input-disabled-border-color;\n $form-select-bg-position: right $form-select-padding-x center;\n $form-select-bg-size: 16px 12px; // In pixels because image dimensions\n $form-select-indicator-color: $gray-800;\n $form-select-indicator: ", ";\n\n $form-select-feedback-icon-padding-end: $form-select-padding-x * 2.5 +\n $form-select-indicator-padding;\n $form-select-feedback-icon-position: center right\n $form-select-indicator-padding;\n $form-select-feedback-icon-size: $input-height-inner-half\n $input-height-inner-half;\n\n $form-select-border-width: $input-border-width;\n $form-select-border-color: $input-border-color;\n $form-select-border-radius: $input-border-radius;\n $form-select-box-shadow: $box-shadow-inset;\n\n $form-select-focus-border-color: $input-focus-border-color;\n $form-select-focus-width: $input-focus-width;\n $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width\n $input-btn-focus-color;\n\n $form-select-padding-y-sm: $input-padding-y-sm;\n $form-select-padding-x-sm: $input-padding-x-sm;\n $form-select-font-size-sm: $input-font-size-sm;\n $form-select-border-radius-sm: $input-border-radius-sm;\n\n $form-select-padding-y-lg: $input-padding-y-lg;\n $form-select-padding-x-lg: $input-padding-x-lg;\n $form-select-font-size-lg: $input-font-size-lg;\n $form-select-border-radius-lg: $input-border-radius-lg;\n\n $form-select-transition: $input-transition;\n\n $form-range-track-width: 100%;\n $form-range-track-height: 0.5rem;\n $form-range-track-cursor: pointer;\n $form-range-track-bg: $gray-300;\n $form-range-track-border-radius: 1rem;\n $form-range-track-box-shadow: $box-shadow-inset;\n\n $form-range-thumb-width: 1rem;\n $form-range-thumb-height: $form-range-thumb-width;\n $form-range-thumb-bg: $component-active-bg;\n $form-range-thumb-border: 0;\n $form-range-thumb-border-radius: 1rem;\n $form-range-thumb-box-shadow: 0 0.1rem 0.25rem rgba($black, 0.1);\n $form-range-thumb-focus-box-shadow: 0 0 0 1px $body-bg,\n $input-focus-box-shadow;\n $form-range-thumb-focus-box-shadow-width: $input-focus-width; // For focus box shadow issue in Edge\n $form-range-thumb-active-bg: tint-color($component-active-bg, 70%);\n $form-range-thumb-disabled-bg: $gray-500;\n $form-range-thumb-transition: background-color 0.15s ease-in-out,\n border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;\n\n $form-file-button-color: $input-color;\n $form-file-button-bg: $input-group-addon-bg;\n $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%);\n\n $form-floating-height: ", ";\n $form-floating-line-height: 1.25;\n $form-floating-padding-x: $input-padding-x;\n $form-floating-padding-y: 1rem;\n $form-floating-input-padding-t: 1.625rem;\n $form-floating-input-padding-b: 0.625rem;\n $form-floating-label-opacity: 0.65;\n $form-floating-label-transform: scale(0.85) translateY(-0.5rem)\n translateX(0.15rem);\n $form-floating-transition: opacity 0.1s ease-in-out,\n transform 0.1s ease-in-out;\n\n // Form validation\n\n $form-feedback-margin-top: $form-text-margin-top;\n $form-feedback-font-size: $form-text-font-size;\n $form-feedback-font-style: $form-text-font-style;\n $form-feedback-valid-color: $success;\n $form-feedback-invalid-color: $danger;\n\n $form-feedback-icon-valid-color: $form-feedback-valid-color;\n $form-feedback-icon-valid: ", ";\n $form-feedback-icon-invalid-color: $form-feedback-invalid-color;\n $form-feedback-icon-invalid: ", ";\n\n $form-validation-states: ", ";\n\n // Z-index master list\n //\n // Warning: Avoid customizing these values. They're used for a bird's eye view\n // of components dependent on the z-axis and are designed to all work together.\n\n $zindex-dropdown: 1000;\n $zindex-sticky: 1020;\n $zindex-fixed: 1030;\n $zindex-offcanvas-backdrop: 1040;\n $zindex-offcanvas: 1045;\n $zindex-modal-backdrop: 1050;\n $zindex-modal: 1055;\n $zindex-popover: 1070;\n $zindex-tooltip: 1080;\n\n // Navs\n\n $nav-link-padding-y: 0.5rem;\n $nav-link-padding-x: 1rem;\n $nav-link-font-size: null;\n $nav-link-font-weight: null;\n $nav-link-color: $link-color;\n $nav-link-hover-color: $link-hover-color;\n $nav-link-transition: color 0.15s ease-in-out,\n background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;\n $nav-link-disabled-color: $gray-600;\n\n $nav-tabs-border-color: $gray-300;\n $nav-tabs-border-width: $border-width;\n $nav-tabs-border-radius: $border-radius;\n $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color;\n $nav-tabs-link-active-color: $gray-700;\n $nav-tabs-link-active-bg: $body-bg;\n $nav-tabs-link-active-border-color: $gray-300 $gray-300\n $nav-tabs-link-active-bg;\n\n $nav-pills-border-radius: $border-radius;\n $nav-pills-link-active-color: $component-active-color;\n $nav-pills-link-active-bg: $component-active-bg;\n\n // Navbar\n\n $navbar-padding-y: $spacer * 0.5;\n $navbar-padding-x: null;\n\n $navbar-nav-link-padding-x: 0.5rem;\n\n $navbar-brand-font-size: $font-size-lg;\n\n $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y *\n 2;\n $navbar-brand-height: $navbar-brand-font-size * $line-height-base;\n $navbar-brand-padding-y-intermediate-result: $nav-link-height -\n $navbar-brand-height;\n $navbar-brand-padding-y: $navbar-brand-padding-y-intermediate-result * 0.5;\n $navbar-brand-margin-end: 1rem;\n\n $navbar-toggler-padding-y: 0.25rem;\n $navbar-toggler-padding-x: 0.75rem;\n $navbar-toggler-font-size: $font-size-lg;\n $navbar-toggler-border-radius: $btn-border-radius;\n $navbar-toggler-focus-width: $btn-focus-width;\n $navbar-toggler-transition: box-shadow 0.15s ease-in-out;\n\n $navbar-dark-color: rgba($white, 0.55);\n $navbar-dark-hover-color: rgba($white, 0.75);\n $navbar-dark-active-color: $white;\n $navbar-dark-disabled-color: rgba($white, 0.25);\n $navbar-dark-toggler-icon-bg: ", ";\n $navbar-dark-toggler-border-color: rgba($white, 0.1);\n\n $navbar-light-color: rgba($black, 0.55);\n $navbar-light-hover-color: rgba($black, 0.7);\n $navbar-light-active-color: rgba($black, 0.9);\n $navbar-light-disabled-color: rgba($black, 0.3);\n $navbar-light-toggler-icon-bg: ", ";\n $navbar-light-toggler-border-color: rgba($black, 0.1);\n\n $navbar-light-brand-color: $navbar-light-active-color;\n $navbar-light-brand-hover-color: $navbar-light-active-color;\n $navbar-dark-brand-color: $navbar-dark-active-color;\n $navbar-dark-brand-hover-color: $navbar-dark-active-color;\n\n // Dropdowns\n //\n // Dropdown menu container and contents.\n\n $dropdown-min-width: 10rem;\n $dropdown-padding-x: 0;\n $dropdown-padding-y: 0.5rem;\n $dropdown-spacer: 0.125rem;\n $dropdown-font-size: $font-size-base;\n $dropdown-color: $body-color;\n $dropdown-bg: $white;\n $dropdown-border-color: rgba($black, 0.15);\n $dropdown-border-radius: $border-radius;\n $dropdown-border-width: $border-width;\n $dropdown-inner-border-radius: subtract(\n $dropdown-border-radius,\n $dropdown-border-width\n );\n $dropdown-divider-bg: $dropdown-border-color;\n $dropdown-divider-margin-y: $spacer * 0.5;\n $dropdown-box-shadow: $box-shadow;\n\n $dropdown-link-color: $gray-900;\n\n $dropdown-link-hover-color: ", ";\n $dropdown-link-hover-bg: $gray-200;\n\n $dropdown-link-active-color: $component-active-color;\n $dropdown-link-active-bg: $component-active-bg;\n\n $dropdown-link-disabled-color: $gray-500;\n\n $dropdown-item-padding-y: $spacer * 0.25;\n $dropdown-item-padding-x: $spacer;\n\n $dropdown-header-color: $gray-600;\n $dropdown-header-padding: $dropdown-padding-y $dropdown-item-padding-x;\n\n $dropdown-dark-color: $gray-300;\n $dropdown-dark-bg: $gray-800;\n $dropdown-dark-border-color: $dropdown-border-color;\n $dropdown-dark-divider-bg: $dropdown-divider-bg;\n $dropdown-dark-box-shadow: null;\n $dropdown-dark-link-color: $dropdown-dark-color;\n $dropdown-dark-link-hover-color: $white;\n $dropdown-dark-link-hover-bg: rgba($white, 0.15);\n $dropdown-dark-link-active-color: $dropdown-link-active-color;\n $dropdown-dark-link-active-bg: $dropdown-link-active-bg;\n $dropdown-dark-link-disabled-color: $gray-500;\n $dropdown-dark-header-color: $gray-500;\n\n // ...\n\n // Cards\n\n $card-spacer-y: $spacer;\n $card-spacer-x: $spacer;\n $card-title-spacer-y: $spacer * 0.5;\n $card-border-width: $border-width;\n $card-border-color: rgba($black, 0.125);\n $card-border-radius: $border-radius;\n $card-box-shadow: null;\n $card-inner-border-radius: ", ";\n $card-cap-padding-y: $card-spacer-y * 0.5;\n $card-cap-padding-x: $card-spacer-x;\n $card-cap-bg: rgba($black, 0.03);\n $card-cap-color: null;\n $card-height: null;\n $card-color: null;\n $card-bg: $white;\n $card-img-overlay-padding: $spacer;\n $card-group-margin: $grid-gutter-width * 0.5;\n\n // ...\n\n // Tooltips\n\n $tooltip-font-size: $font-size-sm;\n $tooltip-max-width: 200px;\n $tooltip-color: $white;\n $tooltip-bg: $black;\n $tooltip-border-radius: $border-radius;\n $tooltip-opacity: 0.9;\n $tooltip-padding-y: $spacer * 0.25;\n $tooltip-padding-x: $spacer * 0.5;\n $tooltip-margin: 0;\n\n $tooltip-arrow-width: 0.8rem;\n $tooltip-arrow-height: 0.4rem;\n $tooltip-arrow-color: $tooltip-bg;\n\n // Popovers\n\n $popover-font-size: $font-size-sm;\n $popover-bg: $white;\n $popover-max-width: 276px;\n $popover-border-width: $border-width;\n $popover-border-color: rgba($black, 0.2);\n $popover-border-radius: $border-radius-lg;\n $popover-inner-border-radius: ", ";\n $popover-box-shadow: $box-shadow;\n\n $popover-header-bg: ", ";\n $popover-header-color: $headings-color;\n $popover-header-padding-y: 0.5rem;\n $popover-header-padding-x: $spacer;\n\n $popover-body-color: $body-color;\n $popover-body-padding-y: $spacer;\n $popover-body-padding-x: $spacer;\n\n $popover-arrow-width: 1rem;\n $popover-arrow-height: 0.5rem;\n $popover-arrow-color: $popover-bg;\n\n $popover-arrow-outer-color: $popover-border-color;\n\n // Toasts\n\n $toast-max-width: 350px;\n $toast-padding-x: 0.75rem;\n $toast-padding-y: 0.5rem;\n $toast-font-size: 0.875rem;\n $toast-color: null;\n $toast-background-color: rgba($white, 0.85);\n $toast-border-width: 1px;\n $toast-border-color: rgba($black, 0.1);\n $toast-border-radius: $border-radius;\n $toast-box-shadow: $box-shadow;\n $toast-spacing: $container-padding-x;\n\n $toast-header-color: $gray-600;\n $toast-header-background-color: rgba($white, 0.85);\n $toast-header-border-color: rgba($black, 0.05);\n\n // Badges\n\n $badge-font-size: $font-size-base * 0.75; // 0.75em;\n $badge-font-weight: $font-weight-bold;\n $badge-color: $white;\n $badge-padding-y: $badge-font-size * 0.35; // 0.35em;\n $badge-padding-x: $badge-font-size * 0.65; // 0.65em;\n $badge-border-radius: $border-radius;\n\n // Modals\n\n $modal-inner-padding: $spacer;\n\n $modal-footer-margin-between: 0.5rem;\n\n $modal-dialog-margin: 0.5rem;\n $modal-dialog-margin-y-sm-up: 1.75rem;\n\n $modal-title-line-height: $line-height-base;\n\n $modal-content-color: null;\n $modal-content-bg: $white;\n $modal-content-border-color: rgba($black, 0.65); // rgba($black, 0.2);\n $modal-content-border-width: $border-width;\n $modal-content-border-radius: $border-radius-lg;\n $modal-content-inner-border-radius: ", ";\n $modal-content-box-shadow-xs: $box-shadow-sm;\n $modal-content-box-shadow-sm-up: $box-shadow;\n\n $modal-backdrop-bg: $black;\n $modal-backdrop-opacity: 0.5;\n $modal-header-border-color: $border-color;\n $modal-footer-border-color: $modal-header-border-color;\n $modal-header-border-width: $modal-content-border-width;\n $modal-footer-border-width: $modal-header-border-width;\n $modal-header-padding-y: $modal-inner-padding;\n $modal-header-padding-x: $modal-inner-padding;\n $modal-header-padding: $modal-header-padding-y $modal-header-padding-x; // Keep this for backwards compatibility\n\n $modal-sm: 300px;\n $modal-md: 500px;\n $modal-lg: 800px;\n $modal-xl: 1140px;\n\n $modal-fade-transform: translate(0, -50px);\n $modal-show-transform: none;\n $modal-transition: transform 0.3s ease-out;\n $modal-scale-transform: scale(1.02);\n\n // ...\n\n // Alerts\n //\n // Define alert colors, border radius, and padding.\n\n $alert-padding-y: $spacer;\n $alert-padding-x: $spacer;\n $alert-margin-bottom: 1rem;\n $alert-border-radius: $border-radius;\n $alert-link-font-weight: $font-weight-bold;\n $alert-border-width: $border-width;\n $alert-bg-scale: -0.8; // 80%;\n $alert-border-scale: -0.7; // 70%;\n $alert-color-scale: 0.4; // 40%;\n $alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side\n\n // Progress bars\n\n $progress-height: 1rem;\n $progress-font-size: $font-size-base * 0.75;\n $progress-bg: $gray-200;\n $progress-border-radius: $border-radius;\n $progress-box-shadow: $box-shadow-inset;\n $progress-bar-color: $white;\n $progress-bar-bg: $primary;\n $progress-bar-animation-timing: 1s linear infinite;\n $progress-bar-transition: width 0.6s ease;\n\n // List group\n\n $list-group-color: $gray-900;\n $list-group-bg: $white;\n $list-group-border-color: rgba($black, 0.125);\n $list-group-border-width: $border-width;\n $list-group-border-radius: $border-radius;\n\n $list-group-item-padding-y: $spacer * 0.5;\n $list-group-item-padding-x: $spacer;\n $list-group-item-bg-scale: -0.8; // 80%;\n $list-group-item-color-scale: 0.4; // 40%;\n\n $list-group-hover-bg: $gray-100;\n $list-group-active-color: $component-active-color;\n $list-group-active-bg: $component-active-bg;\n $list-group-active-border-color: $list-group-active-bg;\n\n $list-group-disabled-color: $gray-600;\n $list-group-disabled-bg: $list-group-bg;\n\n $list-group-action-color: $gray-700;\n $list-group-action-hover-color: $list-group-action-color;\n\n $list-group-action-active-color: $body-color;\n $list-group-action-active-bg: $gray-200;\n\n // Close\n\n $btn-close-width: $font-size-base * 1; // 1em;\n $btn-close-height: $btn-close-width;\n $btn-close-padding-x: $font-size-base * 0.25; // .25em;\n $btn-close-padding-y: $btn-close-padding-x;\n $btn-close-color: $black;\n $btn-close-bg: ", ";\n $btn-close-focus-shadow: $input-btn-focus-box-shadow;\n $btn-close-opacity: 0.5;\n $btn-close-hover-opacity: 0.75;\n $btn-close-focus-opacity: 1;\n $btn-close-disabled-opacity: 0.25;\n // $btn-close-white-filter: invert(1) grayscale(100%) brightness(200%);\n\n // Offcanvas\n\n $offcanvas-padding-y: $modal-inner-padding;\n $offcanvas-padding-x: $modal-inner-padding;\n $offcanvas-horizontal-width: 400px;\n $offcanvas-vertical-height: 200px; // 30vh;\n $offcanvas-transition-duration: 0.3s;\n $offcanvas-border-color: $modal-content-border-color;\n $offcanvas-border-width: $modal-content-border-width;\n $offcanvas-title-line-height: $modal-title-line-height;\n $offcanvas-bg-color: $modal-content-bg;\n $offcanvas-color: $modal-content-color;\n $offcanvas-box-shadow: $modal-content-box-shadow-xs;\n $offcanvas-backdrop-bg: $modal-backdrop-bg;\n $offcanvas-backdrop-opacity: $modal-backdrop-opacity;\n\n // Code\n\n $code-font-size: $small-font-size;\n $code-color: $pink;\n\n $kbd-padding-y: 0.2rem;\n $kbd-padding-x: 0.4rem;\n $kbd-font-size: $code-font-size;\n $kbd-color: $white;\n $kbd-bg: $gray-900;\n\n $pre-color: null;\n"])), function (t) {
|
|
2167
2188
|
return {
|
|
2168
2189
|
100: t['gray-100'],
|
|
2169
2190
|
200: t['gray-200'],
|
|
@@ -2622,7 +2643,7 @@ function useViewport(initialViewport) {
|
|
|
2622
2643
|
return viewport;
|
|
2623
2644
|
}
|
|
2624
2645
|
|
|
2625
|
-
var propTypes$
|
|
2646
|
+
var propTypes$1i = {
|
|
2626
2647
|
children: PropTypes__default["default"].node.isRequired,
|
|
2627
2648
|
// eslint-disable-next-line react/forbid-prop-types,
|
|
2628
2649
|
utilities: PropTypes__default["default"].object,
|
|
@@ -2656,12 +2677,12 @@ function Provider(props) {
|
|
|
2656
2677
|
}, /*#__PURE__*/React__default["default"].createElement(overlays.OverlayProvider, null, children));
|
|
2657
2678
|
}
|
|
2658
2679
|
|
|
2659
|
-
Provider.propTypes = propTypes$
|
|
2680
|
+
Provider.propTypes = propTypes$1i;
|
|
2660
2681
|
|
|
2661
2682
|
var TextStyleContext = /*#__PURE__*/React__default["default"].createContext();
|
|
2662
2683
|
TextStyleContext.displayName = 'TextStyleContext';
|
|
2663
2684
|
|
|
2664
|
-
var propTypes$
|
|
2685
|
+
var propTypes$1h = {
|
|
2665
2686
|
children: PropTypes__default["default"].node,
|
|
2666
2687
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2667
2688
|
style: PropTypes__default["default"].any
|
|
@@ -2679,7 +2700,7 @@ function TextStyleProvider(props) {
|
|
|
2679
2700
|
}, children);
|
|
2680
2701
|
}
|
|
2681
2702
|
|
|
2682
|
-
TextStyleProvider.propTypes = propTypes$
|
|
2703
|
+
TextStyleProvider.propTypes = propTypes$1h;
|
|
2683
2704
|
|
|
2684
2705
|
function useMedia() {
|
|
2685
2706
|
var context = React.useContext(Context);
|
|
@@ -2759,8 +2780,8 @@ function useStyle(style, styleName) {
|
|
|
2759
2780
|
};
|
|
2760
2781
|
}
|
|
2761
2782
|
|
|
2762
|
-
var _excluded$
|
|
2763
|
-
var propTypes$
|
|
2783
|
+
var _excluded$1j = ["style", "styleName"];
|
|
2784
|
+
var propTypes$1g = {
|
|
2764
2785
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2765
2786
|
style: PropTypes__default["default"].any,
|
|
2766
2787
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -2769,7 +2790,7 @@ var propTypes$1d = {
|
|
|
2769
2790
|
var View = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
2770
2791
|
var style = props.style,
|
|
2771
2792
|
styleName = props.styleName,
|
|
2772
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2793
|
+
elementProps = _objectWithoutProperties(props, _excluded$1j);
|
|
2773
2794
|
|
|
2774
2795
|
var media = useMedia();
|
|
2775
2796
|
var resolveStyle = useStyle(style, styleName);
|
|
@@ -2781,28 +2802,28 @@ var View = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
|
|
|
2781
2802
|
}));
|
|
2782
2803
|
});
|
|
2783
2804
|
View.displayName = 'View';
|
|
2784
|
-
View.propTypes = propTypes$
|
|
2805
|
+
View.propTypes = propTypes$1g;
|
|
2785
2806
|
|
|
2786
|
-
var _excluded$
|
|
2807
|
+
var _excluded$1i = ["children", "color", "dismissible", "style"];
|
|
2787
2808
|
|
|
2788
|
-
var _templateObject$
|
|
2789
|
-
var propTypes$
|
|
2809
|
+
var _templateObject$11, _templateObject2$H, _templateObject3$m;
|
|
2810
|
+
var propTypes$1f = {
|
|
2790
2811
|
children: PropTypes__default["default"].node.isRequired,
|
|
2791
2812
|
color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
|
|
2792
2813
|
dismissible: PropTypes__default["default"].bool,
|
|
2793
2814
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2794
2815
|
style: PropTypes__default["default"].any
|
|
2795
2816
|
};
|
|
2796
|
-
var styles$
|
|
2797
|
-
'.alert': css(_templateObject$
|
|
2817
|
+
var styles$10 = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
2818
|
+
'.alert': css(_templateObject$11 || (_templateObject$11 = _taggedTemplateLiteral(["\n position: relative;\n padding: $alert-padding-y $alert-padding-x;\n margin-bottom: $alert-margin-bottom;\n background-color: transparent;\n border: $alert-border-width solid transparent;\n border-radius: $alert-border-radius;\n "])))
|
|
2798
2819
|
}, each(THEME_COLORS, function (state, value) {
|
|
2799
2820
|
var _ref;
|
|
2800
2821
|
|
|
2801
|
-
return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$
|
|
2822
|
+
return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), function (t) {
|
|
2802
2823
|
return shiftColor(t['alert-bg-scale'], value(t));
|
|
2803
2824
|
}, function (t) {
|
|
2804
2825
|
return shiftColor(t['alert-border-scale'], value(t));
|
|
2805
|
-
})), _defineProperty(_ref, ".alert-".concat(state, "-text"), css(_templateObject3$
|
|
2826
|
+
})), _defineProperty(_ref, ".alert-".concat(state, "-text"), css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
2806
2827
|
return shiftColor(t['alert-color-scale'], value(t));
|
|
2807
2828
|
})), _ref;
|
|
2808
2829
|
})), {}, {
|
|
@@ -2816,10 +2837,10 @@ var Alert = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
2816
2837
|
_props$dismissible = props.dismissible,
|
|
2817
2838
|
dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
|
|
2818
2839
|
style = props.style,
|
|
2819
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2840
|
+
elementProps = _objectWithoutProperties(props, _excluded$1i);
|
|
2820
2841
|
|
|
2821
|
-
var classes = getStyles(styles$
|
|
2822
|
-
var textClasses = getStyles(styles$
|
|
2842
|
+
var classes = getStyles(styles$10, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
|
|
2843
|
+
var textClasses = getStyles(styles$10, [".alert-".concat(color, "-text")]);
|
|
2823
2844
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
2824
2845
|
ref: ref,
|
|
2825
2846
|
accessibilityRole: "alert",
|
|
@@ -2829,13 +2850,13 @@ var Alert = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
2829
2850
|
}, children));
|
|
2830
2851
|
});
|
|
2831
2852
|
Alert.displayName = 'Alert';
|
|
2832
|
-
Alert.propTypes = propTypes$
|
|
2853
|
+
Alert.propTypes = propTypes$1f;
|
|
2833
2854
|
|
|
2834
|
-
var _excluded$
|
|
2855
|
+
var _excluded$1h = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
|
|
2835
2856
|
|
|
2836
|
-
var _templateObject$
|
|
2837
|
-
var propTypes$
|
|
2838
|
-
color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
|
|
2857
|
+
var _templateObject$10, _templateObject2$G, _templateObject3$l, _templateObject4$i, _templateObject5$g;
|
|
2858
|
+
var propTypes$1e = {
|
|
2859
|
+
color: PropTypes__default["default"].oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
|
|
2839
2860
|
small: PropTypes__default["default"].bool,
|
|
2840
2861
|
mark: PropTypes__default["default"].bool,
|
|
2841
2862
|
bold: PropTypes__default["default"].bool,
|
|
@@ -2845,12 +2866,12 @@ var propTypes$1b = {
|
|
|
2845
2866
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2846
2867
|
styleName: PropTypes__default["default"].any
|
|
2847
2868
|
};
|
|
2848
|
-
var styles
|
|
2849
|
-
text: css(_templateObject$
|
|
2850
|
-
strong: css(_templateObject2$
|
|
2851
|
-
italic: css(_templateObject3$
|
|
2852
|
-
small: css(_templateObject4$
|
|
2853
|
-
mark: css(_templateObject5$
|
|
2869
|
+
var styles$$ = StyleSheet.create({
|
|
2870
|
+
text: css(_templateObject$10 || (_templateObject$10 = _taggedTemplateLiteral(["\n font-family: $font-family-base;\n font-size: $font-size-base;\n font-weight: $font-weight-base;\n line-height: $font-size-base * $line-height-base;\n color: $body-color;\n text-align: $body-text-align;\n "]))),
|
|
2871
|
+
strong: css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n font-weight: $font-weight-bolder;\n "]))),
|
|
2872
|
+
italic: css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n font-style: italic;\n "]))),
|
|
2873
|
+
small: css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n font-size: $small-font-size;\n line-height: $small-font-size * $line-height-base;\n "]))),
|
|
2874
|
+
mark: css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n padding: $mark-padding;\n background-color: $mark-bg;\n "])))
|
|
2854
2875
|
});
|
|
2855
2876
|
|
|
2856
2877
|
var getStyleName$1 = function getStyleName(styleName, color) {
|
|
@@ -2873,13 +2894,13 @@ var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
|
|
|
2873
2894
|
small = _props$small === void 0 ? false : _props$small,
|
|
2874
2895
|
style = props.style,
|
|
2875
2896
|
styleName = props.styleName,
|
|
2876
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2897
|
+
elementProps = _objectWithoutProperties(props, _excluded$1h);
|
|
2877
2898
|
|
|
2878
2899
|
var media = useMedia();
|
|
2879
2900
|
var context = React.useContext(TextStyleContext);
|
|
2880
|
-
var classes = getStyles(styles
|
|
2901
|
+
var classes = getStyles(styles$$, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
|
|
2881
2902
|
var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
|
|
2882
|
-
(!context || !context.hasTextAncestor) && styles
|
|
2903
|
+
(!context || !context.hasTextAncestor) && styles$$.text, // eslint-disable-next-line react/destructuring-assignment
|
|
2883
2904
|
context && context.style, classes, style], getStyleName$1(styleName, color));
|
|
2884
2905
|
var element = /*#__PURE__*/React__default["default"].createElement(reactNative.Text, _extends({}, elementProps, {
|
|
2885
2906
|
ref: ref,
|
|
@@ -2903,12 +2924,12 @@ var Text = /*#__PURE__*/React__default["default"].forwardRef(function (props, re
|
|
|
2903
2924
|
}, element);
|
|
2904
2925
|
});
|
|
2905
2926
|
Text.displayName = 'Text';
|
|
2906
|
-
Text.propTypes = propTypes$
|
|
2927
|
+
Text.propTypes = propTypes$1e;
|
|
2907
2928
|
|
|
2908
|
-
var _excluded$
|
|
2929
|
+
var _excluded$1g = ["children", "color", "style", "styleName"];
|
|
2909
2930
|
|
|
2910
|
-
var _templateObject
|
|
2911
|
-
var propTypes$
|
|
2931
|
+
var _templateObject$$, _templateObject2$F;
|
|
2932
|
+
var propTypes$1d = {
|
|
2912
2933
|
children: PropTypes__default["default"].node.isRequired,
|
|
2913
2934
|
color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
|
|
2914
2935
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -2916,9 +2937,9 @@ var propTypes$1a = {
|
|
|
2916
2937
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2917
2938
|
styleName: PropTypes__default["default"].any
|
|
2918
2939
|
};
|
|
2919
|
-
var styles$
|
|
2920
|
-
'.badge': css(_templateObject
|
|
2921
|
-
'.badge-text': css(_templateObject2$
|
|
2940
|
+
var styles$_ = StyleSheet.create({
|
|
2941
|
+
'.badge': css(_templateObject$$ || (_templateObject$$ = _taggedTemplateLiteral(["\n // display: inline-block;\n padding: $badge-padding-y $badge-padding-x;\n border-radius: $badge-border-radius;\n // @include gradient-bg();\n "]))),
|
|
2942
|
+
'.badge-text': css(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteral(["\n font-size: $badge-font-size;\n font-weight: $badge-font-weight;\n line-height: $badge-font-size * 1;\n color: $badge-color;\n text-align: center;\n // white-space: nowrap;\n // vertical-align: baseline;\n "])))
|
|
2922
2943
|
});
|
|
2923
2944
|
|
|
2924
2945
|
var getStyleName = function getStyleName(styleName, color) {
|
|
@@ -2934,10 +2955,10 @@ var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
2934
2955
|
color = props.color,
|
|
2935
2956
|
style = props.style,
|
|
2936
2957
|
styleName = props.styleName,
|
|
2937
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2958
|
+
elementProps = _objectWithoutProperties(props, _excluded$1g);
|
|
2938
2959
|
|
|
2939
|
-
var classes = getStyles(styles$
|
|
2940
|
-
var textClasses = getStyles(styles$
|
|
2960
|
+
var classes = getStyles(styles$_, ['.badge']);
|
|
2961
|
+
var textClasses = getStyles(styles$_, ['.badge-text']);
|
|
2941
2962
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
2942
2963
|
ref: ref,
|
|
2943
2964
|
style: [classes, style],
|
|
@@ -2947,30 +2968,30 @@ var Badge = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
2947
2968
|
}, /*#__PURE__*/React__default["default"].createElement(Text, null, children)));
|
|
2948
2969
|
});
|
|
2949
2970
|
Badge.displayName = 'Badge';
|
|
2950
|
-
Badge.propTypes = propTypes$
|
|
2971
|
+
Badge.propTypes = propTypes$1d;
|
|
2951
2972
|
|
|
2952
2973
|
var ButtonGroupContext = /*#__PURE__*/React__default["default"].createContext();
|
|
2953
2974
|
ButtonGroupContext.displayName = 'ButtonGroupContext';
|
|
2954
2975
|
|
|
2955
|
-
var _excluded$
|
|
2976
|
+
var _excluded$1f = ["children", "size", "style"];
|
|
2956
2977
|
|
|
2957
|
-
var _templateObject$
|
|
2958
|
-
var propTypes$
|
|
2978
|
+
var _templateObject$_;
|
|
2979
|
+
var propTypes$1c = {
|
|
2959
2980
|
children: PropTypes__default["default"].node.isRequired,
|
|
2960
2981
|
size: PropTypes__default["default"].oneOf(['lg', 'sm']),
|
|
2961
2982
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2962
2983
|
style: PropTypes__default["default"].any
|
|
2963
2984
|
};
|
|
2964
|
-
var styles$
|
|
2965
|
-
'.btn-group': css(_templateObject$
|
|
2985
|
+
var styles$Z = StyleSheet.create({
|
|
2986
|
+
'.btn-group': css(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n flex-direction: row; // added for bootstrap-rn\n border-radius: $btn-border-radius;\n "])))
|
|
2966
2987
|
});
|
|
2967
2988
|
var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
2968
2989
|
var children = props.children,
|
|
2969
2990
|
size = props.size,
|
|
2970
2991
|
style = props.style,
|
|
2971
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2992
|
+
elementProps = _objectWithoutProperties(props, _excluded$1f);
|
|
2972
2993
|
|
|
2973
|
-
var classes = getStyles(styles$
|
|
2994
|
+
var classes = getStyles(styles$Z, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
|
|
2974
2995
|
|
|
2975
2996
|
var role = reactNative.Platform.OS === 'web' ? 'group' : null;
|
|
2976
2997
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
@@ -2984,25 +3005,25 @@ var ButtonGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
2984
3005
|
}, makeListChildren(children)));
|
|
2985
3006
|
});
|
|
2986
3007
|
ButtonGroup.displayName = 'ButtonGroup';
|
|
2987
|
-
ButtonGroup.propTypes = propTypes$
|
|
3008
|
+
ButtonGroup.propTypes = propTypes$1c;
|
|
2988
3009
|
|
|
2989
|
-
var _excluded$
|
|
3010
|
+
var _excluded$1e = ["children", "style"];
|
|
2990
3011
|
|
|
2991
|
-
var _templateObject$
|
|
2992
|
-
var propTypes$
|
|
3012
|
+
var _templateObject$Z;
|
|
3013
|
+
var propTypes$1b = {
|
|
2993
3014
|
children: PropTypes__default["default"].node.isRequired,
|
|
2994
3015
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2995
3016
|
style: PropTypes__default["default"].any
|
|
2996
3017
|
};
|
|
2997
|
-
var styles$
|
|
2998
|
-
'.btn-toolbar': css(_templateObject$
|
|
3018
|
+
var styles$Y = StyleSheet.create({
|
|
3019
|
+
'.btn-toolbar': css(_templateObject$Z || (_templateObject$Z = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-wrap: wrap;\n justify-content: flex-start;\n "])))
|
|
2999
3020
|
});
|
|
3000
3021
|
var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3001
3022
|
var children = props.children,
|
|
3002
3023
|
style = props.style,
|
|
3003
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3024
|
+
elementProps = _objectWithoutProperties(props, _excluded$1e);
|
|
3004
3025
|
|
|
3005
|
-
var classes = getStyles(styles$
|
|
3026
|
+
var classes = getStyles(styles$Y, ['.btn-toolbar']);
|
|
3006
3027
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3007
3028
|
ref: ref,
|
|
3008
3029
|
accessibilityRole: "toolbar",
|
|
@@ -3010,7 +3031,7 @@ var ButtonToolbar = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
3010
3031
|
}), children);
|
|
3011
3032
|
});
|
|
3012
3033
|
ButtonToolbar.displayName = 'ButtonToolbar';
|
|
3013
|
-
ButtonToolbar.propTypes = propTypes$
|
|
3034
|
+
ButtonToolbar.propTypes = propTypes$1b;
|
|
3014
3035
|
|
|
3015
3036
|
function useForcedContext(Context) {
|
|
3016
3037
|
var context = React.useContext(Context);
|
|
@@ -3018,7 +3039,7 @@ function useForcedContext(Context) {
|
|
|
3018
3039
|
return context;
|
|
3019
3040
|
}
|
|
3020
3041
|
|
|
3021
|
-
var _excluded$
|
|
3042
|
+
var _excluded$1d = ["ref"];
|
|
3022
3043
|
function useModifier(name, props, ref) {
|
|
3023
3044
|
var context = useForcedContext(Context);
|
|
3024
3045
|
var useModifierHook = context.modifiers[name];
|
|
@@ -3029,13 +3050,13 @@ function useModifier(name, props, ref) {
|
|
|
3029
3050
|
|
|
3030
3051
|
var _useModifierHook = useModifierHook(props),
|
|
3031
3052
|
modifierRef = _useModifierHook.ref,
|
|
3032
|
-
modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$
|
|
3053
|
+
modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1d);
|
|
3033
3054
|
|
|
3034
3055
|
return [modifierProps, concatRefs(modifierRef, ref)];
|
|
3035
3056
|
}
|
|
3036
3057
|
|
|
3037
|
-
var _excluded$
|
|
3038
|
-
_excluded2 = ["ref"];
|
|
3058
|
+
var _excluded$1c = ["toggle", "dismiss"],
|
|
3059
|
+
_excluded2$2 = ["ref"];
|
|
3039
3060
|
|
|
3040
3061
|
var getActionHook = function getActionHook(toggle, dismiss) {
|
|
3041
3062
|
if (toggle) {
|
|
@@ -3052,7 +3073,7 @@ var getActionHook = function getActionHook(toggle, dismiss) {
|
|
|
3052
3073
|
function useAction(props, ref) {
|
|
3053
3074
|
var toggle = props.toggle,
|
|
3054
3075
|
dismiss = props.dismiss,
|
|
3055
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3076
|
+
restProps = _objectWithoutProperties(props, _excluded$1c);
|
|
3056
3077
|
|
|
3057
3078
|
var useActionHook = getActionHook(toggle, dismiss);
|
|
3058
3079
|
|
|
@@ -3062,13 +3083,13 @@ function useAction(props, ref) {
|
|
|
3062
3083
|
|
|
3063
3084
|
var _useActionHook = useActionHook(restProps),
|
|
3064
3085
|
actionRef = _useActionHook.ref,
|
|
3065
|
-
actionProps = _objectWithoutProperties(_useActionHook, _excluded2);
|
|
3086
|
+
actionProps = _objectWithoutProperties(_useActionHook, _excluded2$2);
|
|
3066
3087
|
|
|
3067
3088
|
return [actionProps, concatRefs(actionRef, ref)];
|
|
3068
3089
|
}
|
|
3069
3090
|
|
|
3070
|
-
var _excluded$
|
|
3071
|
-
var propTypes$
|
|
3091
|
+
var _excluded$1b = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
|
|
3092
|
+
var propTypes$1a = {
|
|
3072
3093
|
children: PropTypes__default["default"].node,
|
|
3073
3094
|
active: PropTypes__default["default"].bool,
|
|
3074
3095
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -3120,7 +3141,7 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
3120
3141
|
textStyle = actionProps.textStyle,
|
|
3121
3142
|
activeTextStyle = actionProps.activeTextStyle,
|
|
3122
3143
|
styleName = actionProps.styleName,
|
|
3123
|
-
elementProps = _objectWithoutProperties(actionProps, _excluded$
|
|
3144
|
+
elementProps = _objectWithoutProperties(actionProps, _excluded$1b);
|
|
3124
3145
|
|
|
3125
3146
|
var media = useMedia();
|
|
3126
3147
|
var resolveStyle = useStyle(style, styleName);
|
|
@@ -3157,13 +3178,13 @@ var Pressable = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
3157
3178
|
} : children);
|
|
3158
3179
|
});
|
|
3159
3180
|
Pressable.displayName = 'Pressable';
|
|
3160
|
-
Pressable.propTypes = propTypes$
|
|
3181
|
+
Pressable.propTypes = propTypes$1a;
|
|
3161
3182
|
|
|
3162
|
-
var _excluded$
|
|
3183
|
+
var _excluded$1a = ["active", "handlePress"];
|
|
3163
3184
|
function useToggleButton(props) {
|
|
3164
3185
|
var active = props.active,
|
|
3165
3186
|
handlePress = props.handlePress,
|
|
3166
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3187
|
+
restProps = _objectWithoutProperties(props, _excluded$1a);
|
|
3167
3188
|
|
|
3168
3189
|
var _useState = React.useState(active),
|
|
3169
3190
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -3182,10 +3203,10 @@ function useToggleButton(props) {
|
|
|
3182
3203
|
});
|
|
3183
3204
|
}
|
|
3184
3205
|
|
|
3185
|
-
var _excluded$
|
|
3206
|
+
var _excluded$19 = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
3186
3207
|
|
|
3187
|
-
var _templateObject$
|
|
3188
|
-
var propTypes$
|
|
3208
|
+
var _templateObject$Y, _templateObject2$E, _templateObject3$k, _templateObject4$h, _templateObject5$f, _templateObject6$e, _templateObject7$b, _templateObject8$a, _templateObject9$5, _templateObject10$5, _templateObject11$4, _templateObject12$4, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21, _templateObject22, _templateObject23;
|
|
3209
|
+
var propTypes$19 = {
|
|
3189
3210
|
children: PropTypes__default["default"].node.isRequired,
|
|
3190
3211
|
color: PropTypes__default["default"].oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
|
|
3191
3212
|
size: PropTypes__default["default"].oneOf(['lg', 'sm']),
|
|
@@ -3203,14 +3224,14 @@ var propTypes$16 = {
|
|
|
3203
3224
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3204
3225
|
activeTextStyle: PropTypes__default["default"].any
|
|
3205
3226
|
};
|
|
3206
|
-
var styles$
|
|
3207
|
-
'.btn': css(_templateObject$
|
|
3208
|
-
'.btn-text': css(_templateObject2$
|
|
3209
|
-
'.btn-disabled': css(_templateObject3$
|
|
3227
|
+
var styles$X = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
3228
|
+
'.btn': css(_templateObject$Y || (_templateObject$Y = _taggedTemplateLiteral(["\n // display: inline-block;\n @include platform(web) {\n // cursor: if($enable-button-pointers, pointer, null);\n user-select: none;\n }\n background-color: transparent;\n border: $btn-border-width solid transparent;\n padding: $btn-padding-y $btn-padding-x;\n // Manually declare to provide an override to the browser default\n border-radius: $btn-border-radius;\n // @include transition($btn-transition);\n\n &:focus {\n // outline: 0;\n // box-shadow: $btn-focus-box-shadow;\n }\n\n &:active {\n // @include box-shadow($btn-active-box-shadow);\n\n &:focus {\n // @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);\n }\n }\n "]))),
|
|
3229
|
+
'.btn-text': css(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteral(["\n font-family: $btn-font-family;\n font-weight: $btn-font-weight;\n line-height: $btn-font-size * $btn-line-height;\n color: $body-color;\n text-align: center;\n text-decoration: none; // if($link-decoration == none, null, none);\n white-space: $btn-white-space;\n // vertical-align: middle;\n font-size: $btn-font-size;\n\n &:hover {\n color: $body-color;\n text-decoration-line: $link-hover-decoration;\n }\n "]))),
|
|
3230
|
+
'.btn-disabled': css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n // pointer-events: none;\n opacity: $btn-disabled-opacity;\n // @include box-shadow(none);\n "])))
|
|
3210
3231
|
}, each(THEME_COLORS, function (color, value) {
|
|
3211
3232
|
var _ref;
|
|
3212
3233
|
|
|
3213
|
-
return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$
|
|
3234
|
+
return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$h || (_templateObject4$h = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n // @include box-shadow($btn-box-shadow);\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n border-color: ", ";\n /* @if $enable-shadows {\n @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);\n } */\n }\n\n &:active {\n background-color: ", ";\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n border-color: ", ";\n }\n "])), value, value, function (t) {
|
|
3214
3235
|
return shadeColor(t['btn-hover-bg-shade-amount'], value(t));
|
|
3215
3236
|
}, function (t) {
|
|
3216
3237
|
return shadeColor(t['btn-hover-border-shade-amount'], value(t));
|
|
@@ -3222,7 +3243,7 @@ var styles$U = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
|
3222
3243
|
return shadeColor(t['btn-active-bg-shade-amount'], value(t));
|
|
3223
3244
|
}, function (t) {
|
|
3224
3245
|
return shadeColor(t['btn-active-border-shade-amount'], value(t));
|
|
3225
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$
|
|
3246
|
+
})), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$f || (_templateObject5$f = _taggedTemplateLiteral(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:focus {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), function (t) {
|
|
3226
3247
|
return colorContrast(value(t));
|
|
3227
3248
|
}, function (t) {
|
|
3228
3249
|
return colorContrast(value(t));
|
|
@@ -3230,22 +3251,22 @@ var styles$U = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
|
3230
3251
|
return colorContrast(value(t));
|
|
3231
3252
|
}, function (t) {
|
|
3232
3253
|
return colorContrast(value(t));
|
|
3233
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$
|
|
3254
|
+
})), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteral(["\n background-color: ", ";\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n border-color: ", ";\n "])), function (t) {
|
|
3234
3255
|
return shadeColor(t['btn-active-bg-shade-amount'], value(t));
|
|
3235
3256
|
}, function (t) {
|
|
3236
3257
|
return shadeColor(t['btn-active-border-shade-amount'], value(t));
|
|
3237
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$
|
|
3258
|
+
})), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
3238
3259
|
return colorContrast(value(t));
|
|
3239
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$
|
|
3260
|
+
})), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteral(["\n $disabled-background: ", ";\n $disabled-border: ", ";\n\n background-color: $disabled-background;\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n border-color: $disabled-border;\n "])), value, value)), _defineProperty(_ref, ".btn-".concat(color, "-disabled-text"), css(_templateObject9$5 || (_templateObject9$5 = _taggedTemplateLiteral(["\n $disabled-color: ", ";\n\n color: $disabled-color;\n "])), function (t) {
|
|
3240
3261
|
return colorContrast(value(t));
|
|
3241
|
-
})), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$
|
|
3262
|
+
})), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$5 || (_templateObject10$5 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n }\n\n &:focus {\n // box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);\n }\n\n &:active {\n background-color: ", ";\n border-color: ", ";\n\n /* &:focus {\n @if $enable-shadows {\n @include box-shadow(\n $btn-active-box-shadow,\n 0 0 0 $btn-focus-width rgba($color, 0.5)\n );\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: 0 0 0 $btn-focus-width rgba($color, 0.5);\n }\n } */\n }\n "])), value, value, value, value, value)), _defineProperty(_ref, ".btn-outline-".concat(color, "-text"), css(_templateObject11$4 || (_templateObject11$4 = _taggedTemplateLiteral(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), value, function (t) {
|
|
3242
3263
|
return colorContrast(value(t));
|
|
3243
3264
|
}, function (t) {
|
|
3244
3265
|
return colorContrast(value(t));
|
|
3245
|
-
})), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$
|
|
3266
|
+
})), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$4 || (_templateObject12$4 = _taggedTemplateLiteral(["\n background-color: transparent;\n "])))), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled-text"), css(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteral(["\n color: ", ";\n "])), value)), _ref;
|
|
3246
3267
|
})), {}, {
|
|
3247
|
-
'.btn-link-text': css(_templateObject14$
|
|
3248
|
-
'.btn-link-text-disabled': css(_templateObject15$
|
|
3268
|
+
'.btn-link-text': css(_templateObject14$3 || (_templateObject14$3 = _taggedTemplateLiteral(["\n font-weight: $font-weight-normal;\n color: $btn-link-color;\n text-decoration-line: $link-decoration;\n\n &:hover {\n color: $btn-link-hover-color;\n text-decoration-line: $link-hover-decoration;\n }\n\n &:focus {\n text-decoration-line: $link-hover-decoration;\n }\n\n // No need for an active state here\n "]))),
|
|
3269
|
+
'.btn-link-text-disabled': css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n color: $btn-link-disabled-color;\n "]))),
|
|
3249
3270
|
'.btn-lg': css(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteral(["\n padding: $btn-padding-y-lg $btn-padding-x-lg;\n // Manually declare to provide an override to the browser default\n border-radius: $btn-border-radius-lg;\n "]))),
|
|
3250
3271
|
'.btn-lg-text': css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteral(["\n line-height: $btn-font-size-lg * $btn-line-height;\n font-size: $btn-font-size-lg;\n "]))),
|
|
3251
3272
|
'.btn-sm': css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteral(["\n padding: $btn-padding-y-sm $btn-padding-x-sm;\n // Manually declare to provide an override to the browser default\n border-radius: $btn-border-radius-sm;\n "]))),
|
|
@@ -3295,14 +3316,14 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
3295
3316
|
activeStyle = props.activeStyle,
|
|
3296
3317
|
textStyle = props.textStyle,
|
|
3297
3318
|
activeTextStyle = props.activeTextStyle,
|
|
3298
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3319
|
+
elementProps = _objectWithoutProperties(props, _excluded$19);
|
|
3299
3320
|
|
|
3300
3321
|
invariant__default["default"](color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
|
|
3301
3322
|
var group = React.useContext(ButtonGroupContext);
|
|
3302
|
-
var classes = getStyles(styles$
|
|
3303
|
-
var activeClasses = getStyles(styles$
|
|
3304
|
-
var textClasses = getStyles(styles$
|
|
3305
|
-
var activeTextClasses = getStyles(styles$
|
|
3323
|
+
var classes = getStyles(styles$X, ['.btn', getVariant(color, outline), disabled && '.btn-disabled', disabled && "".concat(getVariant(color, outline), "-disabled"), hasSize(size, group, 'lg') && '.btn-lg', hasSize(size, group, 'sm') && '.btn-sm', group && '.btn-group > .btn', group && active && '.btn-group > .btn-active', group && !first && '.btn-group > .btn-not-first', group && !last && '.btn-group > .btn-not-last']);
|
|
3324
|
+
var activeClasses = getStyles(styles$X, ["".concat(getVariant(color, outline), "-active")]);
|
|
3325
|
+
var textClasses = getStyles(styles$X, ['.btn-text', "".concat(getVariant(color, outline), "-text"), color === 'link' && '.btn-link-text', disabled && "".concat(getVariant(color, outline), "-text-disabled"), disabled && color === 'link' && '.btn-link-text-disabled', hasSize(size, group, 'lg') && '.btn-lg-text', hasSize(size, group, 'sm') && '.btn-sm-text']);
|
|
3326
|
+
var activeTextClasses = getStyles(styles$X, ["".concat(getVariant(color, outline), "-active-text")]);
|
|
3306
3327
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
3307
3328
|
ref: ref,
|
|
3308
3329
|
active: active,
|
|
@@ -3314,28 +3335,28 @@ var Button = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
3314
3335
|
}), children);
|
|
3315
3336
|
});
|
|
3316
3337
|
Button.displayName = 'Button';
|
|
3317
|
-
Button.propTypes = propTypes$
|
|
3338
|
+
Button.propTypes = propTypes$19;
|
|
3318
3339
|
Button.useToggle = useToggleButton;
|
|
3319
3340
|
|
|
3320
|
-
var _excluded$
|
|
3341
|
+
var _excluded$18 = ["children", "style"];
|
|
3321
3342
|
|
|
3322
|
-
var _templateObject$
|
|
3323
|
-
var propTypes$
|
|
3343
|
+
var _templateObject$X, _templateObject2$D;
|
|
3344
|
+
var propTypes$18 = {
|
|
3324
3345
|
children: PropTypes__default["default"].node.isRequired,
|
|
3325
3346
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3326
3347
|
style: PropTypes__default["default"].any
|
|
3327
3348
|
};
|
|
3328
|
-
var styles$
|
|
3329
|
-
'.card-body': css(_templateObject$
|
|
3330
|
-
'.card-body-text': css(_templateObject2$
|
|
3349
|
+
var styles$W = StyleSheet.create({
|
|
3350
|
+
'.card-body': css(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n // flex: 1 1 auto;\n padding: $card-spacer-y $card-spacer-x;\n "]))),
|
|
3351
|
+
'.card-body-text': css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n color: $card-color;\n "])))
|
|
3331
3352
|
});
|
|
3332
3353
|
var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3333
3354
|
var children = props.children,
|
|
3334
3355
|
style = props.style,
|
|
3335
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3356
|
+
elementProps = _objectWithoutProperties(props, _excluded$18);
|
|
3336
3357
|
|
|
3337
|
-
var classes = getStyles(styles$
|
|
3338
|
-
var textClasses = getStyles(styles$
|
|
3358
|
+
var classes = getStyles(styles$W, ['.card-body']);
|
|
3359
|
+
var textClasses = getStyles(styles$W, [".card-body-text"]);
|
|
3339
3360
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3340
3361
|
ref: ref,
|
|
3341
3362
|
style: [classes, style]
|
|
@@ -3344,27 +3365,27 @@ var CardBody = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
3344
3365
|
}, children));
|
|
3345
3366
|
});
|
|
3346
3367
|
CardBody.displayName = 'CardBody';
|
|
3347
|
-
CardBody.propTypes = propTypes$
|
|
3368
|
+
CardBody.propTypes = propTypes$18;
|
|
3348
3369
|
|
|
3349
|
-
var _excluded$
|
|
3370
|
+
var _excluded$17 = ["children", "style"];
|
|
3350
3371
|
|
|
3351
|
-
var _templateObject$
|
|
3352
|
-
var propTypes$
|
|
3372
|
+
var _templateObject$W, _templateObject2$C;
|
|
3373
|
+
var propTypes$17 = {
|
|
3353
3374
|
children: PropTypes__default["default"].node.isRequired,
|
|
3354
3375
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3355
3376
|
style: PropTypes__default["default"].any
|
|
3356
3377
|
};
|
|
3357
|
-
var styles$
|
|
3358
|
-
'.card-header': css(_templateObject$
|
|
3359
|
-
'.card-header-text': css(_templateObject2$
|
|
3378
|
+
var styles$V = StyleSheet.create({
|
|
3379
|
+
'.card-header': css(_templateObject$W || (_templateObject$W = _taggedTemplateLiteral(["\n padding: $card-cap-padding-y $card-cap-padding-x;\n margin-bottom: 0; // Removes the default margin-bottom of <hN>\n background-color: $card-cap-bg;\n border-bottom-width: $card-border-width;\n border-style: solid;\n border-color: $card-border-color;\n border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;\n "]))),
|
|
3380
|
+
'.card-header-text': css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
|
|
3360
3381
|
});
|
|
3361
3382
|
var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3362
3383
|
var children = props.children,
|
|
3363
3384
|
style = props.style,
|
|
3364
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3385
|
+
elementProps = _objectWithoutProperties(props, _excluded$17);
|
|
3365
3386
|
|
|
3366
|
-
var classes = getStyles(styles$
|
|
3367
|
-
var textClasses = getStyles(styles$
|
|
3387
|
+
var classes = getStyles(styles$V, ['.card-header']);
|
|
3388
|
+
var textClasses = getStyles(styles$V, ['.card-header-text']);
|
|
3368
3389
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3369
3390
|
ref: ref,
|
|
3370
3391
|
style: [classes, style]
|
|
@@ -3373,27 +3394,27 @@ var CardHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
3373
3394
|
}, children));
|
|
3374
3395
|
});
|
|
3375
3396
|
CardHeader.displayName = 'CardHeader';
|
|
3376
|
-
CardHeader.propTypes = propTypes$
|
|
3397
|
+
CardHeader.propTypes = propTypes$17;
|
|
3377
3398
|
|
|
3378
|
-
var _excluded$
|
|
3399
|
+
var _excluded$16 = ["children", "style"];
|
|
3379
3400
|
|
|
3380
|
-
var _templateObject$
|
|
3381
|
-
var propTypes$
|
|
3401
|
+
var _templateObject$V, _templateObject2$B;
|
|
3402
|
+
var propTypes$16 = {
|
|
3382
3403
|
children: PropTypes__default["default"].node.isRequired,
|
|
3383
3404
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3384
3405
|
style: PropTypes__default["default"].any
|
|
3385
3406
|
};
|
|
3386
|
-
var styles$
|
|
3387
|
-
'.card-footer': css(_templateObject$
|
|
3388
|
-
'.card-footer-text': css(_templateObject2$
|
|
3407
|
+
var styles$U = StyleSheet.create({
|
|
3408
|
+
'.card-footer': css(_templateObject$V || (_templateObject$V = _taggedTemplateLiteral(["\n padding: $card-cap-padding-y $card-cap-padding-x;\n background-color: $card-cap-bg;\n border-top-width: $card-border-width;\n border-style: solid;\n border-color: $card-border-color;\n border-radius: 0 0 $card-inner-border-radius $card-inner-border-radius;\n "]))),
|
|
3409
|
+
'.card-footer-text': css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
|
|
3389
3410
|
});
|
|
3390
3411
|
var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3391
3412
|
var children = props.children,
|
|
3392
3413
|
style = props.style,
|
|
3393
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3414
|
+
elementProps = _objectWithoutProperties(props, _excluded$16);
|
|
3394
3415
|
|
|
3395
|
-
var classes = getStyles(styles$
|
|
3396
|
-
var textClasses = getStyles(styles$
|
|
3416
|
+
var classes = getStyles(styles$U, ['.card-footer']);
|
|
3417
|
+
var textClasses = getStyles(styles$U, ['.card-footer-text']);
|
|
3397
3418
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3398
3419
|
ref: ref,
|
|
3399
3420
|
style: [classes, style]
|
|
@@ -3402,40 +3423,40 @@ var CardFooter = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
3402
3423
|
}, children));
|
|
3403
3424
|
});
|
|
3404
3425
|
CardFooter.displayName = 'CardFooter';
|
|
3405
|
-
CardFooter.propTypes = propTypes$
|
|
3426
|
+
CardFooter.propTypes = propTypes$16;
|
|
3406
3427
|
|
|
3407
|
-
var _excluded$
|
|
3428
|
+
var _excluded$15 = ["children", "style"];
|
|
3408
3429
|
|
|
3409
|
-
var _templateObject$
|
|
3410
|
-
var propTypes$
|
|
3430
|
+
var _templateObject$U;
|
|
3431
|
+
var propTypes$15 = {
|
|
3411
3432
|
children: PropTypes__default["default"].node.isRequired,
|
|
3412
3433
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3413
3434
|
style: PropTypes__default["default"].any
|
|
3414
3435
|
};
|
|
3415
|
-
var styles$
|
|
3416
|
-
'.card': css(_templateObject$
|
|
3436
|
+
var styles$T = StyleSheet.create({
|
|
3437
|
+
'.card': css(_templateObject$U || (_templateObject$U = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n min-width: 0;\n height: $card-height;\n // word-wrap: break-word;\n background-color: $card-bg;\n // background-clip: border-box;\n border: $card-border-width solid $card-border-color;\n border-radius: $card-border-radius;\n // @include box-shadow($card-box-shadow);\n "])))
|
|
3417
3438
|
});
|
|
3418
3439
|
var Card = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3419
3440
|
var children = props.children,
|
|
3420
3441
|
style = props.style,
|
|
3421
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3442
|
+
elementProps = _objectWithoutProperties(props, _excluded$15);
|
|
3422
3443
|
|
|
3423
|
-
var classes = getStyles(styles$
|
|
3444
|
+
var classes = getStyles(styles$T, ['.card']);
|
|
3424
3445
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3425
3446
|
ref: ref,
|
|
3426
3447
|
style: [classes, style]
|
|
3427
3448
|
}), children);
|
|
3428
3449
|
});
|
|
3429
3450
|
Card.displayName = 'Card';
|
|
3430
|
-
Card.propTypes = propTypes$
|
|
3451
|
+
Card.propTypes = propTypes$15;
|
|
3431
3452
|
Card.Header = CardHeader;
|
|
3432
3453
|
Card.Body = CardBody;
|
|
3433
3454
|
Card.Footer = CardFooter;
|
|
3434
3455
|
|
|
3435
|
-
var _excluded$
|
|
3456
|
+
var _excluded$14 = ["children", "disabled", "style", "textStyle"];
|
|
3436
3457
|
|
|
3437
|
-
var _templateObject$
|
|
3438
|
-
var propTypes$
|
|
3458
|
+
var _templateObject$T, _templateObject2$A, _templateObject3$j;
|
|
3459
|
+
var propTypes$14 = {
|
|
3439
3460
|
children: PropTypes__default["default"].node,
|
|
3440
3461
|
disabled: PropTypes__default["default"].bool,
|
|
3441
3462
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -3443,10 +3464,10 @@ var propTypes$11 = {
|
|
|
3443
3464
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3444
3465
|
textStyle: PropTypes__default["default"].any
|
|
3445
3466
|
};
|
|
3446
|
-
var styles$
|
|
3447
|
-
'.btn-close': css(_templateObject$
|
|
3448
|
-
'.btn-close-text': css(_templateObject2$
|
|
3449
|
-
'.btn-close-disabled': css(_templateObject3$
|
|
3467
|
+
var styles$S = StyleSheet.create({
|
|
3468
|
+
'.btn-close': css(_templateObject$T || (_templateObject$T = _taggedTemplateLiteral(["\n // Workaround for missing box-sizing in react native.\n $additionalHeight: $btn-close-padding-y * 2;\n $additionalWidth: $btn-close-padding-x * 2;\n\n // box-sizing: content-box;\n width: $btn-close-width + $additionalHeight;\n height: $btn-close-height + $additionalWidth;\n padding: $btn-close-padding-y $btn-close-padding-x;\n background: transparent;\n border-width: 0; // for button elements\n // @include border-radius();\n opacity: $btn-close-opacity;\n\n &:hover {\n opacity: $btn-close-hover-opacity;\n }\n\n &:focus {\n // outline: 0;\n // box-shadow: $btn-close-focus-shadow;\n opacity: $btn-close-focus-opacity;\n }\n "]))),
|
|
3469
|
+
'.btn-close-text': css(_templateObject2$A || (_templateObject2$A = _taggedTemplateLiteral(["\n color: $btn-close-color;\n\n // Override <a>'s hover style\n &:hover {\n color: $btn-close-color;\n text-decoration: none;\n }\n "]))),
|
|
3470
|
+
'.btn-close-disabled': css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n // pointer-events: none;\n // user-select: none;\n opacity: $btn-close-disabled-opacity;\n "])))
|
|
3450
3471
|
});
|
|
3451
3472
|
var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3452
3473
|
props.children;
|
|
@@ -3454,10 +3475,10 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
3454
3475
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
3455
3476
|
style = props.style,
|
|
3456
3477
|
textStyle = props.textStyle,
|
|
3457
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3478
|
+
elementProps = _objectWithoutProperties(props, _excluded$14);
|
|
3458
3479
|
|
|
3459
|
-
var classes = getStyles(styles$
|
|
3460
|
-
var textClasses = getStyles(styles$
|
|
3480
|
+
var classes = getStyles(styles$S, ['.btn-close', disabled && '.btn-close-disabled']);
|
|
3481
|
+
var textClasses = getStyles(styles$S, ['.btn-close-text']);
|
|
3461
3482
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
3462
3483
|
ref: ref,
|
|
3463
3484
|
disabled: disabled,
|
|
@@ -3466,7 +3487,7 @@ var CloseButton = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
3466
3487
|
}), StyleSheet.value('btn-close-bg'));
|
|
3467
3488
|
});
|
|
3468
3489
|
CloseButton.displayName = 'CloseButton';
|
|
3469
|
-
CloseButton.propTypes = propTypes$
|
|
3490
|
+
CloseButton.propTypes = propTypes$14;
|
|
3470
3491
|
|
|
3471
3492
|
var CollapseContext = /*#__PURE__*/React__default["default"].createContext();
|
|
3472
3493
|
CollapseContext.displayName = 'CollapseContext';
|
|
@@ -3525,7 +3546,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
|
|
|
3525
3546
|
}, [visible]);
|
|
3526
3547
|
}
|
|
3527
3548
|
|
|
3528
|
-
var propTypes$
|
|
3549
|
+
var propTypes$13 = {
|
|
3529
3550
|
children: PropTypes__default["default"].node.isRequired,
|
|
3530
3551
|
defaultVisible: PropTypes__default["default"].bool,
|
|
3531
3552
|
visible: PropTypes__default["default"].bool,
|
|
@@ -3545,14 +3566,14 @@ var CollapseProvider = function CollapseProvider(props) {
|
|
|
3545
3566
|
};
|
|
3546
3567
|
|
|
3547
3568
|
CollapseProvider.displayName = 'CollapseProvider';
|
|
3548
|
-
CollapseProvider.propTypes = propTypes$
|
|
3569
|
+
CollapseProvider.propTypes = propTypes$13;
|
|
3549
3570
|
|
|
3550
|
-
var _excluded$
|
|
3571
|
+
var _excluded$13 = ["onPress"];
|
|
3551
3572
|
function useToggleCollapse(props) {
|
|
3552
3573
|
var context = useForcedContext(CollapseContext);
|
|
3553
3574
|
|
|
3554
3575
|
var handlePress = props.onPress,
|
|
3555
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3576
|
+
restProps = _objectWithoutProperties(props, _excluded$13);
|
|
3556
3577
|
|
|
3557
3578
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
3558
3579
|
onPress: function onPress(event) {
|
|
@@ -3566,13 +3587,13 @@ function useToggleCollapse(props) {
|
|
|
3566
3587
|
});
|
|
3567
3588
|
}
|
|
3568
3589
|
|
|
3569
|
-
var _excluded
|
|
3570
|
-
var propTypes
|
|
3590
|
+
var _excluded$12 = ["children"];
|
|
3591
|
+
var propTypes$12 = {
|
|
3571
3592
|
children: PropTypes__default["default"].node
|
|
3572
3593
|
};
|
|
3573
3594
|
var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3574
3595
|
var children = props.children,
|
|
3575
|
-
elementProps = _objectWithoutProperties(props, _excluded
|
|
3596
|
+
elementProps = _objectWithoutProperties(props, _excluded$12);
|
|
3576
3597
|
|
|
3577
3598
|
var _useForcedContext = useForcedContext(CollapseContext),
|
|
3578
3599
|
identifier = _useForcedContext.identifier,
|
|
@@ -3588,7 +3609,7 @@ var Collapse = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
3588
3609
|
}), children);
|
|
3589
3610
|
});
|
|
3590
3611
|
Collapse.displayName = 'Collapse';
|
|
3591
|
-
Collapse.propTypes = propTypes
|
|
3612
|
+
Collapse.propTypes = propTypes$12;
|
|
3592
3613
|
Collapse.Provider = CollapseProvider;
|
|
3593
3614
|
Collapse.useToggle = useToggleCollapse;
|
|
3594
3615
|
|
|
@@ -3613,18 +3634,18 @@ function infix(breakpoint) {
|
|
|
3613
3634
|
var NavbarContext = /*#__PURE__*/React__default["default"].createContext();
|
|
3614
3635
|
NavbarContext.displayName = 'NavbarContext';
|
|
3615
3636
|
|
|
3616
|
-
var _excluded$
|
|
3637
|
+
var _excluded$11 = ["fluid", "style"];
|
|
3617
3638
|
|
|
3618
|
-
var _templateObject$
|
|
3619
|
-
var propTypes$
|
|
3639
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$a, _templateObject8$9;
|
|
3640
|
+
var propTypes$11 = {
|
|
3620
3641
|
children: PropTypes__default["default"].node.isRequired,
|
|
3621
3642
|
fluid: PropTypes__default["default"].oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
|
|
3622
3643
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3623
3644
|
style: PropTypes__default["default"].any
|
|
3624
3645
|
};
|
|
3625
|
-
var styles$
|
|
3626
|
-
'.container': css(_templateObject$
|
|
3627
|
-
'.container-sm': css(_templateObject2$
|
|
3646
|
+
var styles$R = StyleSheet.create(_objectSpread2({
|
|
3647
|
+
'.container': css(_templateObject$S || (_templateObject$S = _taggedTemplateLiteral(["\n width: 100%;\n padding-right: $container-padding-x;\n padding-left: $container-padding-x;\n margin-right: auto;\n margin-left: auto;\n "]))),
|
|
3648
|
+
'.container-sm': css(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: ", ";\n }\n @include media-breakpoint-up(md) {\n max-width: ", ";\n }\n @include media-breakpoint-up(lg) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3628
3649
|
return t['container-max-widths'].sm;
|
|
3629
3650
|
}, function (t) {
|
|
3630
3651
|
return t['container-max-widths'].md;
|
|
@@ -3635,7 +3656,7 @@ var styles$O = StyleSheet.create(_objectSpread2({
|
|
|
3635
3656
|
}, function (t) {
|
|
3636
3657
|
return t['container-max-widths'].xxl;
|
|
3637
3658
|
}),
|
|
3638
|
-
'.container-md': css(_templateObject3$
|
|
3659
|
+
'.container-md': css(_templateObject3$i || (_templateObject3$i = _taggedTemplateLiteral(["\n @include media-breakpoint-up(md) {\n max-width: ", ";\n }\n @include media-breakpoint-up(lg) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3639
3660
|
return t['container-max-widths'].md;
|
|
3640
3661
|
}, function (t) {
|
|
3641
3662
|
return t['container-max-widths'].lg;
|
|
@@ -3644,34 +3665,34 @@ var styles$O = StyleSheet.create(_objectSpread2({
|
|
|
3644
3665
|
}, function (t) {
|
|
3645
3666
|
return t['container-max-widths'].xxl;
|
|
3646
3667
|
}),
|
|
3647
|
-
'.container-lg': css(_templateObject4$
|
|
3668
|
+
'.container-lg': css(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3648
3669
|
return t['container-max-widths'].lg;
|
|
3649
3670
|
}, function (t) {
|
|
3650
3671
|
return t['container-max-widths'].xl;
|
|
3651
3672
|
}, function (t) {
|
|
3652
3673
|
return t['container-max-widths'].xxl;
|
|
3653
3674
|
}),
|
|
3654
|
-
'.container-xl': css(_templateObject5$
|
|
3675
|
+
'.container-xl': css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteral(["\n @include media-breakpoint-up(xl) {\n max-width: ", ";\n }\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3655
3676
|
return t['container-max-widths'].xl;
|
|
3656
3677
|
}, function (t) {
|
|
3657
3678
|
return t['container-max-widths'].xxl;
|
|
3658
3679
|
}),
|
|
3659
|
-
'.container-xxl': css(_templateObject6$
|
|
3680
|
+
'.container-xxl': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3660
3681
|
return t['container-max-widths'].xxl;
|
|
3661
3682
|
}),
|
|
3662
3683
|
// Navbar styles
|
|
3663
|
-
'.navbar .container': css(_templateObject7$
|
|
3684
|
+
'.navbar .container': css(_templateObject7$a || (_templateObject7$a = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n "])))
|
|
3664
3685
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
3665
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$
|
|
3686
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$9 || (_templateObject8$9 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex-wrap: nowrap;\n }\n "])), next(breakpoint)));
|
|
3666
3687
|
})));
|
|
3667
3688
|
var Container = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3668
3689
|
var _props$fluid = props.fluid,
|
|
3669
3690
|
fluid = _props$fluid === void 0 ? 'sm' : _props$fluid,
|
|
3670
3691
|
style = props.style,
|
|
3671
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3692
|
+
elementProps = _objectWithoutProperties(props, _excluded$11);
|
|
3672
3693
|
|
|
3673
3694
|
var navbar = React.useContext(NavbarContext);
|
|
3674
|
-
var classes = getStyles(styles$
|
|
3695
|
+
var classes = getStyles(styles$R, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
|
|
3675
3696
|
fluid !== true && ".container-".concat(fluid), // Navbar styles
|
|
3676
3697
|
navbar && '.navbar .container', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .container")]);
|
|
3677
3698
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
@@ -3680,16 +3701,17 @@ var Container = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
3680
3701
|
}));
|
|
3681
3702
|
});
|
|
3682
3703
|
Container.displayName = 'Container';
|
|
3683
|
-
Container.propTypes = propTypes$
|
|
3704
|
+
Container.propTypes = propTypes$11;
|
|
3684
3705
|
|
|
3685
3706
|
var DropdownContext = /*#__PURE__*/React__default["default"].createContext();
|
|
3686
3707
|
DropdownContext.displayName = 'DropdownContext';
|
|
3687
3708
|
|
|
3688
|
-
var propTypes$
|
|
3709
|
+
var propTypes$10 = {
|
|
3689
3710
|
children: PropTypes__default["default"].func.isRequired,
|
|
3690
3711
|
placement: PropTypes__default["default"].string.isRequired,
|
|
3691
3712
|
targetRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]),
|
|
3692
3713
|
offset: PropTypes__default["default"].number,
|
|
3714
|
+
arrowOffset: PropTypes__default["default"].number,
|
|
3693
3715
|
visible: PropTypes__default["default"].bool.isRequired
|
|
3694
3716
|
};
|
|
3695
3717
|
|
|
@@ -3698,6 +3720,8 @@ var Overlay = function Overlay(props) {
|
|
|
3698
3720
|
targetRef = props.targetRef,
|
|
3699
3721
|
placement = props.placement,
|
|
3700
3722
|
offset = props.offset,
|
|
3723
|
+
_props$arrowOffset = props.arrowOffset,
|
|
3724
|
+
arrowOffset = _props$arrowOffset === void 0 ? 0 : _props$arrowOffset,
|
|
3701
3725
|
visible = props.visible;
|
|
3702
3726
|
var overlayRef = React.useRef();
|
|
3703
3727
|
var overlay = overlays.useOverlayPosition({
|
|
@@ -3706,27 +3730,44 @@ var Overlay = function Overlay(props) {
|
|
|
3706
3730
|
overlayRef: overlayRef,
|
|
3707
3731
|
offset: offset,
|
|
3708
3732
|
isOpen: visible
|
|
3709
|
-
});
|
|
3733
|
+
}); // Remove undefined arrow styles and adjust arrow offset.
|
|
3734
|
+
|
|
3735
|
+
if (overlay.arrowProps.style.left === undefined) {
|
|
3736
|
+
delete overlay.arrowProps.style.left;
|
|
3737
|
+
|
|
3738
|
+
if (overlay.arrowProps.style.top) {
|
|
3739
|
+
overlay.arrowProps.style.top -= arrowOffset;
|
|
3740
|
+
}
|
|
3741
|
+
}
|
|
3742
|
+
|
|
3743
|
+
if (overlay.arrowProps.style.top === undefined) {
|
|
3744
|
+
delete overlay.arrowProps.style.top;
|
|
3745
|
+
|
|
3746
|
+
if (overlay.arrowProps.style.left) {
|
|
3747
|
+
overlay.arrowProps.style.left -= arrowOffset;
|
|
3748
|
+
}
|
|
3749
|
+
}
|
|
3750
|
+
|
|
3710
3751
|
return children(overlay, overlayRef);
|
|
3711
3752
|
};
|
|
3712
3753
|
|
|
3713
3754
|
Overlay.displayName = 'Overlay';
|
|
3714
|
-
Overlay.propTypes = propTypes$
|
|
3755
|
+
Overlay.propTypes = propTypes$10;
|
|
3715
3756
|
|
|
3716
|
-
var _excluded$
|
|
3757
|
+
var _excluded$10 = ["children", "start", "end", "style"];
|
|
3717
3758
|
|
|
3718
|
-
var _templateObject$
|
|
3759
|
+
var _templateObject$R, _templateObject2$y;
|
|
3719
3760
|
var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
3720
|
-
var propTypes
|
|
3761
|
+
var propTypes$$ = {
|
|
3721
3762
|
children: PropTypes__default["default"].node.isRequired,
|
|
3722
3763
|
start: PropTypes__default["default"].oneOf(ALIGNMENT_BREAKPOINTS),
|
|
3723
3764
|
end: PropTypes__default["default"].oneOf(ALIGNMENT_BREAKPOINTS),
|
|
3724
3765
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3725
3766
|
style: PropTypes__default["default"].any
|
|
3726
3767
|
};
|
|
3727
|
-
var styles$
|
|
3728
|
-
'.dropdown-menu': css(_templateObject$
|
|
3729
|
-
'.dropdown-menu-text': css(_templateObject2$
|
|
3768
|
+
var styles$Q = StyleSheet.create({
|
|
3769
|
+
'.dropdown-menu': css(_templateObject$R || (_templateObject$R = _taggedTemplateLiteral(["\n position: absolute;\n z-index: $zindex-dropdown;\n // display: none; // none by default, but block on \"open\" of the menu\n min-width: $dropdown-min-width;\n padding: $dropdown-padding-y $dropdown-padding-x;\n margin: 0; // Override default margin of ul\n // list-style: none;\n background-color: $dropdown-bg;\n // background-clip: padding-box;\n border: $dropdown-border-width solid $dropdown-border-color;\n border-radius: $dropdown-border-radius;\n // @include box-shadow($dropdown-box-shadow);\n "]))),
|
|
3770
|
+
'.dropdown-menu-text': css(_templateObject2$y || (_templateObject2$y = _taggedTemplateLiteral(["\n font-size: $dropdown-font-size;\n color: $dropdown-color;\n text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)\n "])))
|
|
3730
3771
|
});
|
|
3731
3772
|
|
|
3732
3773
|
var getAlignment = function getAlignment(media, start, end) {
|
|
@@ -3746,7 +3787,7 @@ var getAlignment = function getAlignment(media, start, end) {
|
|
|
3746
3787
|
return startIndex > endIndex ? 'start' : 'end';
|
|
3747
3788
|
};
|
|
3748
3789
|
|
|
3749
|
-
var
|
|
3790
|
+
var transformPlacement = function transformPlacement(media, direction, start, end) {
|
|
3750
3791
|
if (direction === 'start' || direction === 'end') {
|
|
3751
3792
|
return "".concat(direction, " top");
|
|
3752
3793
|
}
|
|
@@ -3761,7 +3802,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
|
|
|
3761
3802
|
_props$end = props.end,
|
|
3762
3803
|
end = _props$end === void 0 ? false : _props$end,
|
|
3763
3804
|
style = props.style,
|
|
3764
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3805
|
+
elementProps = _objectWithoutProperties(props, _excluded$10);
|
|
3765
3806
|
|
|
3766
3807
|
var dropdown = useForcedContext(DropdownContext);
|
|
3767
3808
|
var media = useMedia();
|
|
@@ -3774,22 +3815,20 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
|
|
|
3774
3815
|
return null;
|
|
3775
3816
|
}
|
|
3776
3817
|
|
|
3777
|
-
var classes = getStyles(styles$
|
|
3778
|
-
var textClasses = getStyles(styles$
|
|
3818
|
+
var classes = getStyles(styles$Q, ['.dropdown-menu']);
|
|
3819
|
+
var textClasses = getStyles(styles$Q, ['.dropdown-menu-text']);
|
|
3779
3820
|
return /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
|
|
3780
|
-
placement:
|
|
3821
|
+
placement: transformPlacement(media, direction, start, end),
|
|
3781
3822
|
targetRef: triggerRef,
|
|
3782
3823
|
offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
|
|
3783
3824
|
visible: visible
|
|
3784
|
-
}, function (
|
|
3785
|
-
var overlayProps = _ref.overlayProps,
|
|
3786
|
-
rendered = _ref.rendered;
|
|
3825
|
+
}, function (overlay, overlayRef) {
|
|
3787
3826
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3788
|
-
ref: concatRefs(
|
|
3827
|
+
ref: concatRefs(overlayRef, ref),
|
|
3789
3828
|
accessibilityLabelledBy: identifier,
|
|
3790
3829
|
style: [classes, style, {
|
|
3791
|
-
opacity: rendered ? 1 : 0
|
|
3792
|
-
}, overlayProps.style]
|
|
3830
|
+
opacity: overlay.rendered ? 1 : 0
|
|
3831
|
+
}, overlay.overlayProps.style]
|
|
3793
3832
|
}), /*#__PURE__*/React__default["default"].createElement(DropdownContext.Provider, {
|
|
3794
3833
|
value: dropdown
|
|
3795
3834
|
}, /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
|
|
@@ -3798,12 +3837,12 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
|
|
|
3798
3837
|
}));
|
|
3799
3838
|
});
|
|
3800
3839
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
3801
|
-
DropdownMenu.propTypes = propTypes
|
|
3840
|
+
DropdownMenu.propTypes = propTypes$$;
|
|
3802
3841
|
|
|
3803
|
-
var _excluded
|
|
3842
|
+
var _excluded$$ = ["children", "onPress", "active", "disabled", "style", "textStyle"];
|
|
3804
3843
|
|
|
3805
|
-
var _templateObject$
|
|
3806
|
-
var propTypes$
|
|
3844
|
+
var _templateObject$Q, _templateObject2$x, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
|
|
3845
|
+
var propTypes$_ = {
|
|
3807
3846
|
children: PropTypes__default["default"].node.isRequired,
|
|
3808
3847
|
onPress: PropTypes__default["default"].func,
|
|
3809
3848
|
active: PropTypes__default["default"].bool,
|
|
@@ -3813,13 +3852,13 @@ var propTypes$X = {
|
|
|
3813
3852
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3814
3853
|
textStyle: PropTypes__default["default"].any
|
|
3815
3854
|
};
|
|
3816
|
-
var styles$
|
|
3817
|
-
'.dropdown-item': css(_templateObject$
|
|
3818
|
-
'.dropdown-item-text': css(_templateObject2$
|
|
3819
|
-
'.dropdown-item-active': css(_templateObject3$
|
|
3820
|
-
'.dropdown-item-active-text': css(_templateObject4$
|
|
3821
|
-
'.dropdown-item-disabled': css(_templateObject5$
|
|
3822
|
-
'.dropdown-item-disabled-text': css(_templateObject6$
|
|
3855
|
+
var styles$P = StyleSheet.create({
|
|
3856
|
+
'.dropdown-item': css(_templateObject$Q || (_templateObject$Q = _taggedTemplateLiteral(["\n width: 100%;\n padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n // clear: both;\n background-color: transparent;\n border: 0;\n\n &:hover {\n // @include gradient-bg($dropdown-link-hover-bg);\n background-color: $dropdown-link-hover-bg;\n }\n &:focus {\n // @include gradient-bg($dropdown-link-hover-bg);\n background-color: $dropdown-link-hover-bg;\n }\n "]))),
|
|
3857
|
+
'.dropdown-item-text': css(_templateObject2$x || (_templateObject2$x = _taggedTemplateLiteral(["\n font-weight: $font-weight-normal;\n color: $dropdown-link-color;\n // text-align: inherit;\n text-decoration: none; // if($link-decoration == none, null, none);\n // white-space: nowrap;\n\n &:hover {\n color: $dropdown-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n &:focus {\n color: $dropdown-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n "]))),
|
|
3858
|
+
'.dropdown-item-active': css(_templateObject3$h || (_templateObject3$h = _taggedTemplateLiteral(["\n // @include gradient-bg($dropdown-link-active-bg);\n background-color: $dropdown-link-active-bg;\n\n &:hover {\n background-color: $dropdown-link-active-bg;\n }\n &:focus {\n background-color: $dropdown-link-active-bg;\n }\n "]))),
|
|
3859
|
+
'.dropdown-item-active-text': css(_templateObject4$f || (_templateObject4$f = _taggedTemplateLiteral(["\n color: $dropdown-link-active-color;\n text-decoration: none;\n\n &:hover {\n color: $dropdown-link-active-color;\n }\n &:focus {\n color: $dropdown-link-active-color;\n }\n "]))),
|
|
3860
|
+
'.dropdown-item-disabled': css(_templateObject5$d || (_templateObject5$d = _taggedTemplateLiteral(["\n // pointer-events: none;\n background-color: transparent;\n // Remove CSS gradients if they're enabled\n // background-image: if($enable-gradients, none, null);\n\n &:hover {\n background-color: transparent;\n }\n &:focus {\n background-color: transparent;\n }\n "]))),
|
|
3861
|
+
'.dropdown-item-disabled-text': css(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteral(["\n color: $dropdown-link-disabled-color;\n\n &:hover {\n color: $dropdown-link-disabled-color;\n }\n &:focus {\n color: $dropdown-link-disabled-color;\n }\n "])))
|
|
3823
3862
|
});
|
|
3824
3863
|
|
|
3825
3864
|
var DropdownItem = function DropdownItem(props) {
|
|
@@ -3831,11 +3870,11 @@ var DropdownItem = function DropdownItem(props) {
|
|
|
3831
3870
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
3832
3871
|
style = props.style,
|
|
3833
3872
|
textStyle = props.textStyle,
|
|
3834
|
-
elementProps = _objectWithoutProperties(props, _excluded
|
|
3873
|
+
elementProps = _objectWithoutProperties(props, _excluded$$);
|
|
3835
3874
|
|
|
3836
3875
|
var dropdown = useForcedContext(DropdownContext);
|
|
3837
|
-
var classes = getStyles(styles$
|
|
3838
|
-
var textClasses = getStyles(styles$
|
|
3876
|
+
var classes = getStyles(styles$P, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
|
|
3877
|
+
var textClasses = getStyles(styles$P, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
|
|
3839
3878
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
3840
3879
|
onPress: concatFns(function () {
|
|
3841
3880
|
dropdown.setVisible(false);
|
|
@@ -3847,37 +3886,37 @@ var DropdownItem = function DropdownItem(props) {
|
|
|
3847
3886
|
};
|
|
3848
3887
|
|
|
3849
3888
|
DropdownItem.displayName = 'DropdownItem';
|
|
3850
|
-
DropdownItem.propTypes = propTypes$
|
|
3889
|
+
DropdownItem.propTypes = propTypes$_;
|
|
3851
3890
|
|
|
3852
|
-
var _excluded$
|
|
3891
|
+
var _excluded$_ = ["children", "style"];
|
|
3853
3892
|
|
|
3854
|
-
var _templateObject$
|
|
3855
|
-
var propTypes$
|
|
3893
|
+
var _templateObject$P;
|
|
3894
|
+
var propTypes$Z = {
|
|
3856
3895
|
children: PropTypes__default["default"].string.isRequired,
|
|
3857
3896
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3858
3897
|
style: PropTypes__default["default"].any
|
|
3859
3898
|
};
|
|
3860
|
-
var styles$
|
|
3861
|
-
'.dropdown-item-text': css(_templateObject$
|
|
3899
|
+
var styles$O = StyleSheet.create({
|
|
3900
|
+
'.dropdown-item-text': css(_templateObject$P || (_templateObject$P = _taggedTemplateLiteral(["\n // display: block;\n padding: $dropdown-item-padding-y $dropdown-item-padding-x;\n color: $dropdown-link-color;\n "])))
|
|
3862
3901
|
});
|
|
3863
3902
|
var DropdownItemText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3864
3903
|
var children = props.children,
|
|
3865
3904
|
style = props.style,
|
|
3866
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3905
|
+
elementProps = _objectWithoutProperties(props, _excluded$_);
|
|
3867
3906
|
|
|
3868
|
-
var classes = getStyles(styles$
|
|
3907
|
+
var classes = getStyles(styles$O, ['.dropdown-item-text']);
|
|
3869
3908
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
3870
3909
|
ref: ref,
|
|
3871
3910
|
style: [classes, style]
|
|
3872
3911
|
}), children);
|
|
3873
3912
|
});
|
|
3874
3913
|
DropdownItemText.displayName = 'DropdownItemText';
|
|
3875
|
-
DropdownItemText.propTypes = propTypes$
|
|
3914
|
+
DropdownItemText.propTypes = propTypes$Z;
|
|
3876
3915
|
|
|
3877
|
-
var _excluded$
|
|
3916
|
+
var _excluded$Z = ["children", "size", "style"];
|
|
3878
3917
|
|
|
3879
|
-
var _templateObject$
|
|
3880
|
-
var propTypes$
|
|
3918
|
+
var _templateObject$O, _templateObject2$w;
|
|
3919
|
+
var propTypes$Y = {
|
|
3881
3920
|
children: PropTypes__default["default"].node.isRequired,
|
|
3882
3921
|
size: PropTypes__default["default"].oneOf(Object.keys(FONT_SIZES).map(function (k) {
|
|
3883
3922
|
return Number(k);
|
|
@@ -3885,18 +3924,18 @@ var propTypes$V = {
|
|
|
3885
3924
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3886
3925
|
style: PropTypes__default["default"].any
|
|
3887
3926
|
};
|
|
3888
|
-
var styles$
|
|
3889
|
-
heading: css(_templateObject$
|
|
3927
|
+
var styles$N = StyleSheet.create(_objectSpread2({
|
|
3928
|
+
heading: css(_templateObject$O || (_templateObject$O = _taggedTemplateLiteral(["\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n color: $headings-color;\n "])))
|
|
3890
3929
|
}, each(FONT_SIZES, function (size, value) {
|
|
3891
|
-
return _defineProperty({}, ".h".concat(size), css(_templateObject2$
|
|
3930
|
+
return _defineProperty({}, ".h".concat(size), css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", " * $headings-line-height;\n "])), value, value));
|
|
3892
3931
|
})));
|
|
3893
3932
|
var Heading$1 = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3894
3933
|
var children = props.children,
|
|
3895
3934
|
size = props.size,
|
|
3896
3935
|
style = props.style,
|
|
3897
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3936
|
+
elementProps = _objectWithoutProperties(props, _excluded$Z);
|
|
3898
3937
|
|
|
3899
|
-
var classes = getStyles(styles$
|
|
3938
|
+
var classes = getStyles(styles$N, ['heading', ".h".concat(size)]);
|
|
3900
3939
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
3901
3940
|
ref: ref,
|
|
3902
3941
|
accessibilityRole: "header",
|
|
@@ -3905,25 +3944,25 @@ var Heading$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
3905
3944
|
}), children);
|
|
3906
3945
|
});
|
|
3907
3946
|
Heading$1.displayName = 'Heading';
|
|
3908
|
-
Heading$1.propTypes = propTypes$
|
|
3947
|
+
Heading$1.propTypes = propTypes$Y;
|
|
3909
3948
|
|
|
3910
|
-
var _excluded$
|
|
3949
|
+
var _excluded$Y = ["children", "style"];
|
|
3911
3950
|
|
|
3912
|
-
var _templateObject$
|
|
3913
|
-
var propTypes$
|
|
3951
|
+
var _templateObject$N;
|
|
3952
|
+
var propTypes$X = {
|
|
3914
3953
|
children: PropTypes__default["default"].node.isRequired,
|
|
3915
3954
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3916
3955
|
style: PropTypes__default["default"].any
|
|
3917
3956
|
};
|
|
3918
|
-
var styles$
|
|
3919
|
-
'.dropdown-header': css(_templateObject$
|
|
3957
|
+
var styles$M = StyleSheet.create({
|
|
3958
|
+
'.dropdown-header': css(_templateObject$N || (_templateObject$N = _taggedTemplateLiteral(["\n // display: block;\n padding: $dropdown-header-padding;\n margin-bottom: 0; // for use with heading elements\n font-size: $font-size-sm;\n color: $dropdown-header-color;\n // white-space: nowrap; // as with > li > a\n "])))
|
|
3920
3959
|
});
|
|
3921
3960
|
var DropdownHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3922
3961
|
var children = props.children,
|
|
3923
3962
|
style = props.style,
|
|
3924
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3963
|
+
elementProps = _objectWithoutProperties(props, _excluded$Y);
|
|
3925
3964
|
|
|
3926
|
-
var classes = getStyles(styles$
|
|
3965
|
+
var classes = getStyles(styles$M, ['.dropdown-header']);
|
|
3927
3966
|
return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
|
|
3928
3967
|
ref: ref,
|
|
3929
3968
|
size: 6,
|
|
@@ -3931,30 +3970,30 @@ var DropdownHeader = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
3931
3970
|
}), children);
|
|
3932
3971
|
});
|
|
3933
3972
|
DropdownHeader.displayName = 'DropdownHeader';
|
|
3934
|
-
DropdownHeader.propTypes = propTypes$
|
|
3973
|
+
DropdownHeader.propTypes = propTypes$X;
|
|
3935
3974
|
|
|
3936
|
-
var _excluded$
|
|
3975
|
+
var _excluded$X = ["style"];
|
|
3937
3976
|
|
|
3938
|
-
var _templateObject$
|
|
3939
|
-
var propTypes$
|
|
3977
|
+
var _templateObject$M;
|
|
3978
|
+
var propTypes$W = {
|
|
3940
3979
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3941
3980
|
style: PropTypes__default["default"].any
|
|
3942
3981
|
};
|
|
3943
|
-
var styles$
|
|
3944
|
-
'.dropdown-divider': css(_templateObject$
|
|
3982
|
+
var styles$L = StyleSheet.create({
|
|
3983
|
+
'.dropdown-divider': css(_templateObject$M || (_templateObject$M = _taggedTemplateLiteral(["\n height: 0;\n margin: $dropdown-divider-margin-y 0;\n overflow: hidden;\n border-top-width: 1px;\n border-style: solid;\n border-color: $dropdown-divider-bg;\n "])))
|
|
3945
3984
|
});
|
|
3946
3985
|
var DropdownDivider = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
3947
3986
|
var style = props.style,
|
|
3948
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3987
|
+
elementProps = _objectWithoutProperties(props, _excluded$X);
|
|
3949
3988
|
|
|
3950
|
-
var classes = getStyles(styles$
|
|
3989
|
+
var classes = getStyles(styles$L, ['.dropdown-divider']);
|
|
3951
3990
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
3952
3991
|
ref: ref,
|
|
3953
3992
|
style: [classes, style]
|
|
3954
3993
|
}));
|
|
3955
3994
|
});
|
|
3956
3995
|
DropdownDivider.displayName = 'DropdownDivider';
|
|
3957
|
-
DropdownDivider.propTypes = propTypes$
|
|
3996
|
+
DropdownDivider.propTypes = propTypes$W;
|
|
3958
3997
|
|
|
3959
3998
|
function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
|
|
3960
3999
|
var identifier = useIdentifier('dropdown');
|
|
@@ -3976,12 +4015,12 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
|
|
|
3976
4015
|
}, [visible]);
|
|
3977
4016
|
}
|
|
3978
4017
|
|
|
3979
|
-
var _excluded$
|
|
4018
|
+
var _excluded$W = ["onPress"];
|
|
3980
4019
|
function useToggleDropdown(props) {
|
|
3981
4020
|
var context = useForcedContext(DropdownContext);
|
|
3982
4021
|
|
|
3983
4022
|
var handlePress = props.onPress,
|
|
3984
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
4023
|
+
restProps = _objectWithoutProperties(props, _excluded$W);
|
|
3985
4024
|
|
|
3986
4025
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
3987
4026
|
nativeID: context.identifier,
|
|
@@ -3997,11 +4036,11 @@ function useToggleDropdown(props) {
|
|
|
3997
4036
|
});
|
|
3998
4037
|
}
|
|
3999
4038
|
|
|
4000
|
-
var _excluded$
|
|
4039
|
+
var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "style"];
|
|
4001
4040
|
|
|
4002
|
-
var _templateObject$
|
|
4041
|
+
var _templateObject$L;
|
|
4003
4042
|
var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
|
|
4004
|
-
var propTypes$
|
|
4043
|
+
var propTypes$V = {
|
|
4005
4044
|
children: PropTypes__default["default"].node,
|
|
4006
4045
|
defaultVisible: PropTypes__default["default"].bool,
|
|
4007
4046
|
visible: PropTypes__default["default"].bool,
|
|
@@ -4010,8 +4049,8 @@ var propTypes$S = {
|
|
|
4010
4049
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4011
4050
|
style: PropTypes__default["default"].any
|
|
4012
4051
|
};
|
|
4013
|
-
var styles$
|
|
4014
|
-
'.dropdown': css(_templateObject$
|
|
4052
|
+
var styles$K = StyleSheet.create({
|
|
4053
|
+
'.dropdown': css(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n position: relative;\n "])))
|
|
4015
4054
|
});
|
|
4016
4055
|
var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4017
4056
|
var children = props.children,
|
|
@@ -4022,10 +4061,10 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
4022
4061
|
_props$direction = props.direction,
|
|
4023
4062
|
direction = _props$direction === void 0 ? 'bottom' : _props$direction,
|
|
4024
4063
|
style = props.style,
|
|
4025
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4064
|
+
elementProps = _objectWithoutProperties(props, _excluded$V);
|
|
4026
4065
|
|
|
4027
4066
|
var dropdown = useDropdown(defaultVisible, visible, onToggle, direction);
|
|
4028
|
-
var classes = getStyles(styles$
|
|
4067
|
+
var classes = getStyles(styles$K, ['.dropdown']);
|
|
4029
4068
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4030
4069
|
ref: ref,
|
|
4031
4070
|
style: [classes, style]
|
|
@@ -4034,7 +4073,7 @@ var Dropdown = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
4034
4073
|
}, children));
|
|
4035
4074
|
});
|
|
4036
4075
|
Dropdown.displayName = 'Dropdown';
|
|
4037
|
-
Dropdown.propTypes = propTypes$
|
|
4076
|
+
Dropdown.propTypes = propTypes$V;
|
|
4038
4077
|
Dropdown.Context = DropdownContext;
|
|
4039
4078
|
Dropdown.ItemText = DropdownItemText;
|
|
4040
4079
|
Dropdown.Header = DropdownHeader;
|
|
@@ -4043,10 +4082,10 @@ Dropdown.Item = DropdownItem;
|
|
|
4043
4082
|
Dropdown.Divider = DropdownDivider;
|
|
4044
4083
|
Dropdown.useToggle = useToggleDropdown;
|
|
4045
4084
|
|
|
4046
|
-
var _excluded$
|
|
4085
|
+
var _excluded$U = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
|
|
4047
4086
|
|
|
4048
|
-
var _templateObject$
|
|
4049
|
-
var propTypes$
|
|
4087
|
+
var _templateObject$K, _templateObject2$v, _templateObject3$g, _templateObject4$e, _templateObject5$c, _templateObject6$b, _templateObject7$9, _templateObject8$8, _templateObject9$4, _templateObject10$4, _templateObject11$3, _templateObject12$3, _templateObject13$3;
|
|
4088
|
+
var propTypes$U = {
|
|
4050
4089
|
children: PropTypes__default["default"].node,
|
|
4051
4090
|
type: PropTypes__default["default"].oneOf(['checkbox', 'radio', 'switch']).isRequired,
|
|
4052
4091
|
value: PropTypes__default["default"].bool.isRequired,
|
|
@@ -4063,25 +4102,25 @@ var propTypes$R = {
|
|
|
4063
4102
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4064
4103
|
labelStyle: PropTypes__default["default"].any
|
|
4065
4104
|
};
|
|
4066
|
-
var styles$
|
|
4067
|
-
'.form-check': css(_templateObject$
|
|
4068
|
-
'.form-check-disabled': css(_templateObject2$
|
|
4069
|
-
'.form-check-input': css(_templateObject3$
|
|
4070
|
-
'.form-check-input-checkbox': css(_templateObject4$
|
|
4071
|
-
'.form-check-input-radio': css(_templateObject5$
|
|
4072
|
-
'.form-check-input-checked': css(_templateObject6$
|
|
4073
|
-
'.form-check-label': css(_templateObject7$
|
|
4074
|
-
'.form-switch': css(_templateObject8$
|
|
4075
|
-
'.form-check-input-switch': css(_templateObject9$
|
|
4076
|
-
'.form-check-input-switch-checked': css(_templateObject10$
|
|
4105
|
+
var styles$J = StyleSheet.create(_objectSpread2({
|
|
4106
|
+
'.form-check': css(_templateObject$K || (_templateObject$K = _taggedTemplateLiteral(["\n // display: block;\n flex-direction: row; // added for bootstrap-rn\n min-height: $form-check-min-height;\n padding-left: $form-check-padding-start;\n margin-bottom: $form-check-margin-bottom;\n "]))),
|
|
4107
|
+
'.form-check-disabled': css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n opacity: $form-check-label-disabled-opacity;\n "]))),
|
|
4108
|
+
'.form-check-input': css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteral(["\n // Use additional variables instead of brackets, because brackets not supported yet.\n $lineHeight: $line-height-base * 1rem;\n $rawMarginTop: $lineHeight - $form-check-input-width;\n\n // float: left;\n margin-left: $form-check-padding-start * -1;\n margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn\n\n width: $form-check-input-width;\n height: $form-check-input-width;\n margin-top: $rawMarginTop * 0.5; // line-height minus check height\n // vertical-align: top;\n background-color: $form-check-input-bg;\n // background-repeat: no-repeat;\n // background-position: center;\n // background-size: contain;\n border: $form-check-input-border;\n @include platform(web) {\n appearance: none;\n user-select: none; // added for bootstrap-rn\n }\n // color-adjust: exact; // Keep themed appearance for print\n // @include transition($form-check-transition);\n\n &:active {\n // filter: $form-check-input-active-filter;\n }\n\n &:focus {\n border-color: $form-check-input-focus-border;\n // outline: 0;\n // box-shadow: $form-check-input-focus-box-shadow;\n }\n "]))),
|
|
4109
|
+
'.form-check-input-checkbox': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n border-radius: $form-check-input-border-radius;\n "]))),
|
|
4110
|
+
'.form-check-input-radio': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n border-radius: $form-check-radio-border-radius;\n "]))),
|
|
4111
|
+
'.form-check-input-checked': css(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteral(["\n background-color: $form-check-input-checked-bg-color;\n border-color: $form-check-input-checked-border-color;\n "]))),
|
|
4112
|
+
'.form-check-label': css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteral(["\n color: $form-check-label-color;\n @include platform(web) {\n cursor: $form-check-label-cursor;\n }\n "]))),
|
|
4113
|
+
'.form-switch': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n padding-left: $form-switch-padding-start;\n "]))),
|
|
4114
|
+
'.form-check-input-switch': css(_templateObject9$4 || (_templateObject9$4 = _taggedTemplateLiteral(["\n width: $form-switch-width;\n margin-left: $form-switch-padding-start * -1;\n margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn\n border-radius: $form-switch-border-radius;\n // @include transition($form-switch-transition);\n align-items: flex-start; // added for bootstrap-rn\n justify-content: center; // added for bootstrap-rn\n "]))),
|
|
4115
|
+
'.form-check-input-switch-checked': css(_templateObject10$4 || (_templateObject10$4 = _taggedTemplateLiteral(["\n align-items: flex-end; // added for bootstrap-rn\n justify-content: center; // added for bootstrap-rn\n "])))
|
|
4077
4116
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4078
4117
|
var _ref;
|
|
4079
4118
|
|
|
4080
|
-
return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css(_templateObject11$
|
|
4119
|
+
return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css(_templateObject11$3 || (_templateObject11$3 = _taggedTemplateLiteral(["\n border: ", ";\n\n &:focus {\n // box-shadow: $focus-box-shadow;\n }\n "])), function (t) {
|
|
4081
4120
|
return data(t).color;
|
|
4082
|
-
})), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$
|
|
4121
|
+
})), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
|
|
4083
4122
|
return data(t).color;
|
|
4084
|
-
})), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$
|
|
4123
|
+
})), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
4085
4124
|
return data(t).color;
|
|
4086
4125
|
})), _ref;
|
|
4087
4126
|
})));
|
|
@@ -4118,16 +4157,16 @@ var CheckInput = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4118
4157
|
style = props.style,
|
|
4119
4158
|
inputStyle = props.inputStyle,
|
|
4120
4159
|
labelStyle = props.labelStyle,
|
|
4121
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4160
|
+
elementProps = _objectWithoutProperties(props, _excluded$U);
|
|
4122
4161
|
|
|
4123
4162
|
if (!children && !label) {
|
|
4124
4163
|
// eslint-disable-next-line no-console
|
|
4125
4164
|
console.warn('You need to provide either children or a label for accessibility.');
|
|
4126
4165
|
}
|
|
4127
4166
|
|
|
4128
|
-
var classes = getStyles(styles$
|
|
4129
|
-
var inputClasses = getStyles(styles$
|
|
4130
|
-
var labelClasses = getStyles(styles$
|
|
4167
|
+
var classes = getStyles(styles$J, ['.form-check', type === 'switch' && '.form-switch', disabled && '.form-check-disabled']);
|
|
4168
|
+
var inputClasses = getStyles(styles$J, ['.form-check-input', type === 'checkbox' && '.form-check-input-checkbox', type === 'radio' && '.form-check-input-radio', type === 'switch' && '.form-check-input-switch', value && '.form-check-input-checked', type === 'switch' && value && '.form-check-input-switch-checked', valid && '.form-check-input.is-valid', valid && value && '.form-check-input-checked.is-valid', invalid && '.form-check-input.is-invalid', invalid && value && '.form-check-input-checked.is-invalid']);
|
|
4169
|
+
var labelClasses = getStyles(styles$J, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
|
|
4131
4170
|
|
|
4132
4171
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
4133
4172
|
ref: ref,
|
|
@@ -4146,7 +4185,7 @@ var CheckInput = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4146
4185
|
}, children));
|
|
4147
4186
|
});
|
|
4148
4187
|
CheckInput.displayName = 'CheckInput';
|
|
4149
|
-
CheckInput.propTypes = propTypes$
|
|
4188
|
+
CheckInput.propTypes = propTypes$U;
|
|
4150
4189
|
|
|
4151
4190
|
var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4152
4191
|
var elementProps = _extends({}, props);
|
|
@@ -4158,17 +4197,17 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
4158
4197
|
});
|
|
4159
4198
|
Checkbox.displayName = 'Checkbox';
|
|
4160
4199
|
|
|
4161
|
-
var _excluded$
|
|
4200
|
+
var _excluded$T = ["children", "type", "style"];
|
|
4162
4201
|
|
|
4163
|
-
var _templateObject$
|
|
4164
|
-
var propTypes$
|
|
4202
|
+
var _templateObject$J;
|
|
4203
|
+
var propTypes$T = {
|
|
4165
4204
|
children: PropTypes__default["default"].node.isRequired,
|
|
4166
4205
|
type: PropTypes__default["default"].oneOf(Object.keys(FORM_VALIDATION_STATES)),
|
|
4167
4206
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4168
4207
|
style: PropTypes__default["default"].any
|
|
4169
4208
|
};
|
|
4170
|
-
var styles$
|
|
4171
|
-
return _defineProperty({}, ".".concat(state, "-feedback"), css(_templateObject$
|
|
4209
|
+
var styles$I = StyleSheet.create(_objectSpread2({}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4210
|
+
return _defineProperty({}, ".".concat(state, "-feedback"), css(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral(["\n // display: none;\n width: 100%;\n margin-top: $form-feedback-margin-top;\n font-size: $form-feedback-font-size;\n font-style: $form-feedback-font-style;\n color: ", ";\n "])), function (t) {
|
|
4172
4211
|
return data(t).color;
|
|
4173
4212
|
}));
|
|
4174
4213
|
})));
|
|
@@ -4176,44 +4215,44 @@ var Feedback = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
4176
4215
|
var children = props.children,
|
|
4177
4216
|
type = props.type,
|
|
4178
4217
|
style = props.style,
|
|
4179
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4218
|
+
elementProps = _objectWithoutProperties(props, _excluded$T);
|
|
4180
4219
|
|
|
4181
|
-
var classes = getStyles(styles$
|
|
4220
|
+
var classes = getStyles(styles$I, [".".concat(type, "-feedback")]);
|
|
4182
4221
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
4183
4222
|
ref: ref,
|
|
4184
4223
|
style: [classes, style]
|
|
4185
4224
|
}), children);
|
|
4186
4225
|
});
|
|
4187
4226
|
Feedback.displayName = 'Feedback';
|
|
4188
|
-
Feedback.propTypes = propTypes$
|
|
4227
|
+
Feedback.propTypes = propTypes$T;
|
|
4189
4228
|
|
|
4190
|
-
var _excluded$
|
|
4229
|
+
var _excluded$S = ["children", "style"];
|
|
4191
4230
|
|
|
4192
|
-
var _templateObject$
|
|
4193
|
-
var propTypes$
|
|
4231
|
+
var _templateObject$I;
|
|
4232
|
+
var propTypes$S = {
|
|
4194
4233
|
children: PropTypes__default["default"].node.isRequired,
|
|
4195
4234
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4196
4235
|
style: PropTypes__default["default"].any
|
|
4197
4236
|
};
|
|
4198
|
-
var styles$
|
|
4199
|
-
'.form-text': css(_templateObject$
|
|
4237
|
+
var styles$H = StyleSheet.create({
|
|
4238
|
+
'.form-text': css(_templateObject$I || (_templateObject$I = _taggedTemplateLiteral(["\n margin-top: $form-text-margin-top;\n font-size: $form-text-font-size;\n font-style: $form-text-font-style;\n font-weight: $form-text-font-weight;\n color: $form-text-color;\n "])))
|
|
4200
4239
|
});
|
|
4201
4240
|
var FormText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4202
4241
|
var children = props.children,
|
|
4203
4242
|
style = props.style,
|
|
4204
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4243
|
+
elementProps = _objectWithoutProperties(props, _excluded$S);
|
|
4205
4244
|
|
|
4206
|
-
var classes = getStyles(styles$
|
|
4245
|
+
var classes = getStyles(styles$H, ['.form-text']);
|
|
4207
4246
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
4208
4247
|
ref: ref,
|
|
4209
4248
|
style: [classes, style]
|
|
4210
4249
|
}), children);
|
|
4211
4250
|
});
|
|
4212
4251
|
FormText.displayName = 'FormText';
|
|
4213
|
-
FormText.propTypes = propTypes$
|
|
4252
|
+
FormText.propTypes = propTypes$S;
|
|
4214
4253
|
|
|
4215
|
-
var _excluded$
|
|
4216
|
-
var propTypes$
|
|
4254
|
+
var _excluded$R = ["contentContainerStyle", "style", "styleName"];
|
|
4255
|
+
var propTypes$R = {
|
|
4217
4256
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4218
4257
|
contentContainerStyle: PropTypes__default["default"].any,
|
|
4219
4258
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -4225,7 +4264,7 @@ var ScrollView = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4225
4264
|
var contentContainerStyle = props.contentContainerStyle,
|
|
4226
4265
|
style = props.style,
|
|
4227
4266
|
styleName = props.styleName,
|
|
4228
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4267
|
+
elementProps = _objectWithoutProperties(props, _excluded$R);
|
|
4229
4268
|
|
|
4230
4269
|
var media = useMedia();
|
|
4231
4270
|
var resolveContentContainerStyle = useStyle(contentContainerStyle);
|
|
@@ -4241,53 +4280,53 @@ var ScrollView = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4241
4280
|
}));
|
|
4242
4281
|
});
|
|
4243
4282
|
ScrollView.displayName = 'ScrollView';
|
|
4244
|
-
ScrollView.propTypes = propTypes$
|
|
4283
|
+
ScrollView.propTypes = propTypes$R;
|
|
4245
4284
|
|
|
4246
|
-
var _excluded$
|
|
4285
|
+
var _excluded$Q = ["children", "style"];
|
|
4247
4286
|
|
|
4248
|
-
var _templateObject$
|
|
4249
|
-
var propTypes$
|
|
4287
|
+
var _templateObject$H, _templateObject2$u;
|
|
4288
|
+
var propTypes$Q = {
|
|
4250
4289
|
children: PropTypes__default["default"].node.isRequired,
|
|
4251
4290
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4252
4291
|
style: PropTypes__default["default"].any
|
|
4253
4292
|
};
|
|
4254
|
-
var styles$
|
|
4255
|
-
'.offcanvas-header': css(_templateObject$
|
|
4293
|
+
var styles$G = StyleSheet.create(_objectSpread2({
|
|
4294
|
+
'.offcanvas-header': css(_templateObject$H || (_templateObject$H = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n align-items: center;\n justify-content: space-between;\n padding: $offcanvas-padding-y $offcanvas-padding-x;\n "])))
|
|
4256
4295
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4257
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-header"), css(_templateObject2$
|
|
4296
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-header"), css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n display: none;\n }\n "])), next(breakpoint)));
|
|
4258
4297
|
})));
|
|
4259
4298
|
var OffcanvasHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4260
4299
|
var children = props.children,
|
|
4261
4300
|
style = props.style,
|
|
4262
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4301
|
+
elementProps = _objectWithoutProperties(props, _excluded$Q);
|
|
4263
4302
|
|
|
4264
4303
|
var navbar = React.useContext(NavbarContext);
|
|
4265
|
-
var classes = getStyles(styles$
|
|
4304
|
+
var classes = getStyles(styles$G, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
|
|
4266
4305
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4267
4306
|
ref: ref,
|
|
4268
4307
|
style: [classes, style]
|
|
4269
4308
|
}), children);
|
|
4270
4309
|
});
|
|
4271
4310
|
OffcanvasHeader.displayName = 'OffcanvasHeader';
|
|
4272
|
-
OffcanvasHeader.propTypes = propTypes$
|
|
4311
|
+
OffcanvasHeader.propTypes = propTypes$Q;
|
|
4273
4312
|
|
|
4274
|
-
var _excluded$
|
|
4313
|
+
var _excluded$P = ["children", "style"];
|
|
4275
4314
|
|
|
4276
|
-
var _templateObject$
|
|
4277
|
-
var propTypes$
|
|
4315
|
+
var _templateObject$G;
|
|
4316
|
+
var propTypes$P = {
|
|
4278
4317
|
children: PropTypes__default["default"].node.isRequired,
|
|
4279
4318
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4280
4319
|
style: PropTypes__default["default"].any
|
|
4281
4320
|
};
|
|
4282
|
-
var styles$
|
|
4283
|
-
'.offcanvas-title': css(_templateObject$
|
|
4321
|
+
var styles$F = StyleSheet.create({
|
|
4322
|
+
'.offcanvas-title': css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n margin-bottom: 0;\n line-height: $font-size-base * $offcanvas-title-line-height;\n "])))
|
|
4284
4323
|
});
|
|
4285
4324
|
var OffcanvasTitle = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4286
4325
|
var children = props.children,
|
|
4287
4326
|
style = props.style,
|
|
4288
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4327
|
+
elementProps = _objectWithoutProperties(props, _excluded$P);
|
|
4289
4328
|
|
|
4290
|
-
var classes = getStyles(styles$
|
|
4329
|
+
var classes = getStyles(styles$F, ['.offcanvas-title']);
|
|
4291
4330
|
return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
|
|
4292
4331
|
size: 5
|
|
4293
4332
|
}, elementProps, {
|
|
@@ -4296,42 +4335,42 @@ var OffcanvasTitle = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
4296
4335
|
}), children);
|
|
4297
4336
|
});
|
|
4298
4337
|
OffcanvasTitle.displayName = 'OffcanvasTitle';
|
|
4299
|
-
OffcanvasTitle.propTypes = propTypes$
|
|
4338
|
+
OffcanvasTitle.propTypes = propTypes$P;
|
|
4300
4339
|
|
|
4301
|
-
var _excluded$
|
|
4340
|
+
var _excluded$O = ["children", "style"];
|
|
4302
4341
|
|
|
4303
|
-
var _templateObject$
|
|
4304
|
-
var propTypes$
|
|
4342
|
+
var _templateObject$F, _templateObject2$t;
|
|
4343
|
+
var propTypes$O = {
|
|
4305
4344
|
children: PropTypes__default["default"].node.isRequired,
|
|
4306
4345
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4307
4346
|
style: PropTypes__default["default"].any
|
|
4308
4347
|
};
|
|
4309
|
-
var styles$
|
|
4310
|
-
'.offcanvas-body': css(_templateObject$
|
|
4348
|
+
var styles$E = StyleSheet.create(_objectSpread2({
|
|
4349
|
+
'.offcanvas-body': css(_templateObject$F || (_templateObject$F = _taggedTemplateLiteral(["\n flex-grow: 1;\n padding: $offcanvas-padding-y $offcanvas-padding-x;\n // overflow-y: auto;\n "])))
|
|
4311
4350
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4312
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css(_templateObject2$
|
|
4351
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css(_templateObject2$t || (_templateObject2$t = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n display: flex;\n flex-grow: 0;\n padding: 0;\n // overflow-y: visible;\n }\n "])), next(breakpoint)));
|
|
4313
4352
|
})));
|
|
4314
4353
|
var OffcanvasBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4315
4354
|
var children = props.children,
|
|
4316
4355
|
style = props.style,
|
|
4317
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4356
|
+
elementProps = _objectWithoutProperties(props, _excluded$O);
|
|
4318
4357
|
|
|
4319
4358
|
var navbar = React.useContext(NavbarContext);
|
|
4320
|
-
var classes = getStyles(styles$
|
|
4359
|
+
var classes = getStyles(styles$E, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
|
|
4321
4360
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4322
4361
|
ref: ref,
|
|
4323
4362
|
style: [classes, style]
|
|
4324
4363
|
}), children);
|
|
4325
4364
|
});
|
|
4326
4365
|
OffcanvasBody.displayName = 'OffcanvasBody';
|
|
4327
|
-
OffcanvasBody.propTypes = propTypes$
|
|
4366
|
+
OffcanvasBody.propTypes = propTypes$O;
|
|
4328
4367
|
|
|
4329
|
-
var _excluded$
|
|
4368
|
+
var _excluded$N = ["children", "visible", "placement", "backdrop", "onToggle", "style"];
|
|
4330
4369
|
|
|
4331
|
-
var _templateObject$
|
|
4370
|
+
var _templateObject$E, _templateObject2$s, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$8, _templateObject8$7;
|
|
4332
4371
|
var PLACEMENTS$1 = ['top', 'bottom', 'start', 'end']; // , 'auto'
|
|
4333
4372
|
|
|
4334
|
-
var propTypes$
|
|
4373
|
+
var propTypes$N = {
|
|
4335
4374
|
children: PropTypes__default["default"].node.isRequired,
|
|
4336
4375
|
visible: PropTypes__default["default"].bool,
|
|
4337
4376
|
placement: PropTypes__default["default"].oneOf(PLACEMENTS$1),
|
|
@@ -4340,16 +4379,16 @@ var propTypes$K = {
|
|
|
4340
4379
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4341
4380
|
style: PropTypes__default["default"].any
|
|
4342
4381
|
};
|
|
4343
|
-
var styles$
|
|
4344
|
-
'.offcanvas': css(_templateObject$
|
|
4345
|
-
'.offcanvas-text': css(_templateObject2$
|
|
4346
|
-
'.offcanvas-backdrop': css(_templateObject3$
|
|
4347
|
-
'.offcanvas-start': css(_templateObject4$
|
|
4348
|
-
'.offcanvas-end': css(_templateObject5$
|
|
4349
|
-
'.offcanvas-top': css(_templateObject6$
|
|
4350
|
-
'.offcanvas-bottom': css(_templateObject7$
|
|
4382
|
+
var styles$D = StyleSheet.create(_objectSpread2({
|
|
4383
|
+
'.offcanvas': css(_templateObject$E || (_templateObject$E = _taggedTemplateLiteral(["\n position: absolute; // fixed;\n bottom: 0;\n z-index: $zindex-offcanvas;\n display: flex;\n flex-direction: column;\n max-width: 100%;\n // visibility: hidden;\n background-color: $offcanvas-bg-color;\n // background-clip: padding-box;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n // @include box-shadow($offcanvas-box-shadow);\n // @include transition(transform $offcanvas-transition-duration ease-in-out);\n "]))),
|
|
4384
|
+
'.offcanvas-text': css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n color: $offcanvas-color;\n "]))),
|
|
4385
|
+
'.offcanvas-backdrop': css(_templateObject3$f || (_templateObject3$f = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n z-index: $zindex-offcanvas-backdrop;\n width: 100%;\n height: 100%;\n background-color: $offcanvas-backdrop-bg;\n opacity: $offcanvas-backdrop-opacity;\n "]))),
|
|
4386
|
+
'.offcanvas-start': css(_templateObject4$d || (_templateObject4$d = _taggedTemplateLiteral(["\n top: 0;\n left: 0;\n width: $offcanvas-horizontal-width;\n border-right-width: $offcanvas-border-width;\n border-style: solid;\n border-color: $offcanvas-border-color;\n // transform: translateX(-100%);\n "]))),
|
|
4387
|
+
'.offcanvas-end': css(_templateObject5$b || (_templateObject5$b = _taggedTemplateLiteral(["\n top: 0;\n right: 0;\n width: $offcanvas-horizontal-width;\n border-left-width: $offcanvas-border-width;\n border-style: solid;\n border-color: $offcanvas-border-color;\n // transform: translateX(100%);\n "]))),
|
|
4388
|
+
'.offcanvas-top': css(_templateObject6$a || (_templateObject6$a = _taggedTemplateLiteral(["\n top: 0;\n right: 0;\n left: 0;\n height: $offcanvas-vertical-height;\n max-height: 100%;\n border-bottom-width: $offcanvas-border-width;\n border-style: solid;\n border-color: $offcanvas-border-color;\n // transform: translateY(-100%);\n "]))),
|
|
4389
|
+
'.offcanvas-bottom': css(_templateObject7$8 || (_templateObject7$8 = _taggedTemplateLiteral(["\n right: 0;\n left: 0;\n height: $offcanvas-vertical-height;\n max-height: 100%;\n width: 100%;\n border-top-width: $offcanvas-border-width;\n border-style: solid;\n border-color: $offcanvas-border-color;\n // transform: translateY(100%);\n "])))
|
|
4351
4390
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4352
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_templateObject8$
|
|
4391
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n position: relative; // inherit;\n bottom: 0;\n // z-index: auto;\n flex-grow: 1;\n // visibility: visible !important; // stylelint-disable-line declaration-no-important\n background-color: transparent;\n border-right-width: 0;\n border-left-width: 0;\n // @include box-shadow(none);\n // @include transition(none);\n // transform: none;\n }\n "])), next(breakpoint)));
|
|
4353
4392
|
})));
|
|
4354
4393
|
var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4355
4394
|
var children = props.children,
|
|
@@ -4360,13 +4399,13 @@ var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
4360
4399
|
backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
|
|
4361
4400
|
handleToggle = props.onToggle,
|
|
4362
4401
|
style = props.style,
|
|
4363
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4402
|
+
elementProps = _objectWithoutProperties(props, _excluded$N);
|
|
4364
4403
|
|
|
4365
4404
|
var media = useMedia();
|
|
4366
4405
|
var navbar = React.useContext(NavbarContext);
|
|
4367
|
-
var backdropClasses = getStyles(styles$
|
|
4368
|
-
var classes = getStyles(styles$
|
|
4369
|
-
var textClasses = getStyles(styles$
|
|
4406
|
+
var backdropClasses = getStyles(styles$D, ['.offcanvas-backdrop']);
|
|
4407
|
+
var classes = getStyles(styles$D, ['.offcanvas', ".offcanvas-".concat(placement), navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas")]);
|
|
4408
|
+
var textClasses = getStyles(styles$D, ['.offcanvas-content-text']); // Render children without modal for navbar.
|
|
4370
4409
|
|
|
4371
4410
|
if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
|
|
4372
4411
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
@@ -4391,7 +4430,7 @@ var Offcanvas = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
4391
4430
|
}, children)));
|
|
4392
4431
|
});
|
|
4393
4432
|
Offcanvas.displayName = 'Offcanvas';
|
|
4394
|
-
Offcanvas.propTypes = propTypes$
|
|
4433
|
+
Offcanvas.propTypes = propTypes$N;
|
|
4395
4434
|
Offcanvas.Header = OffcanvasHeader;
|
|
4396
4435
|
Offcanvas.Title = OffcanvasTitle;
|
|
4397
4436
|
Offcanvas.Body = OffcanvasBody;
|
|
@@ -4399,15 +4438,15 @@ Offcanvas.Body = OffcanvasBody;
|
|
|
4399
4438
|
var PickerContext = /*#__PURE__*/React__default["default"].createContext();
|
|
4400
4439
|
PickerContext.displayName = 'PickerContext';
|
|
4401
4440
|
|
|
4402
|
-
var _templateObject$
|
|
4403
|
-
var propTypes$
|
|
4441
|
+
var _templateObject$D, _templateObject2$r;
|
|
4442
|
+
var propTypes$M = {
|
|
4404
4443
|
label: PropTypes__default["default"].string.isRequired,
|
|
4405
4444
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
4406
4445
|
disabled: PropTypes__default["default"].bool
|
|
4407
4446
|
};
|
|
4408
|
-
var styles$
|
|
4409
|
-
'.form-select-item': css(_templateObject$
|
|
4410
|
-
'.form-select-item-disabled': css(_templateObject2$
|
|
4447
|
+
var styles$C = StyleSheet.create({
|
|
4448
|
+
'.form-select-item': css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n margin: 0.25rem 1rem;\n padding: 0.25rem;\n "]))),
|
|
4449
|
+
'.form-select-item-disabled': css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral([""])))
|
|
4411
4450
|
});
|
|
4412
4451
|
var PickerItem = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4413
4452
|
var label = props.label,
|
|
@@ -4429,7 +4468,7 @@ var PickerItem = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4429
4468
|
}));
|
|
4430
4469
|
}
|
|
4431
4470
|
|
|
4432
|
-
var classes = getStyles(styles$
|
|
4471
|
+
var classes = getStyles(styles$C, ['.form-select-item', disabled && '.form-select-item-disabled']);
|
|
4433
4472
|
var resolveStyle = useStyle(classes);
|
|
4434
4473
|
var selected = value === context.value;
|
|
4435
4474
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, commonProps, {
|
|
@@ -4446,12 +4485,12 @@ var PickerItem = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4446
4485
|
}, label));
|
|
4447
4486
|
});
|
|
4448
4487
|
PickerItem.displayName = 'PickerItem';
|
|
4449
|
-
PickerItem.propTypes = propTypes$
|
|
4488
|
+
PickerItem.propTypes = propTypes$M;
|
|
4450
4489
|
|
|
4451
|
-
var _excluded$
|
|
4490
|
+
var _excluded$M = ["children", "value", "onChange", "onFocus", "onBlur", "placeholder", "size", "disabled", "valid", "invalid", "useNativeComponent", "style", "styleName"];
|
|
4452
4491
|
|
|
4453
|
-
var _templateObject$
|
|
4454
|
-
var propTypes$
|
|
4492
|
+
var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$7;
|
|
4493
|
+
var propTypes$L = {
|
|
4455
4494
|
children: PropTypes__default["default"].node.isRequired,
|
|
4456
4495
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
4457
4496
|
onChange: PropTypes__default["default"].func,
|
|
@@ -4468,20 +4507,20 @@ var propTypes$I = {
|
|
|
4468
4507
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4469
4508
|
styleName: PropTypes__default["default"].any
|
|
4470
4509
|
};
|
|
4471
|
-
var styles$
|
|
4472
|
-
'.form-select': css(_templateObject$
|
|
4473
|
-
'.form-select-disabled': css(_templateObject2$
|
|
4474
|
-
'.form-select-sm': css(_templateObject3$
|
|
4475
|
-
'.form-select-lg': css(_templateObject4$
|
|
4510
|
+
var styles$B = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
4511
|
+
'.form-select': css(_templateObject$C || (_templateObject$C = _taggedTemplateLiteral(["\n // display: block;\n width: 100%;\n padding: $form-select-padding-y $form-select-indicator-padding\n $form-select-padding-y $form-select-padding-x;\n // See https://github.com/twbs/bootstrap/issues/32636\n // -moz-padding-start: subtract($form-select-padding-x, 3px);\n font-family: $form-select-font-family;\n font-size: $form-select-font-size;\n font-weight: $form-select-font-weight;\n line-height: $form-select-font-size * $form-select-line-height;\n color: $form-select-color;\n background-color: $form-select-bg;\n // background-image: escape-svg($form-select-indicator);\n // background-repeat: no-repeat;\n // background-position: $form-select-bg-position;\n // background-size: $form-select-bg-size;\n border: $form-select-border-width solid $form-select-border-color;\n border-radius: $form-select-border-radius;\n // @include box-shadow($form-select-box-shadow);\n // @include transition($form-select-transition);\n @include platform(web) {\n appearance: none;\n }\n\n &:focus {\n border-color: $form-select-focus-border-color;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n /* @if $enable-shadows {\n @include box-shadow(\n $form-select-box-shadow,\n $form-select-focus-box-shadow\n );\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $form-select-focus-box-shadow;\n } */\n }\n "]))),
|
|
4512
|
+
'.form-select-disabled': css(_templateObject2$q || (_templateObject2$q = _taggedTemplateLiteral(["\n color: $form-select-disabled-color;\n background-color: $form-select-disabled-bg;\n border-color: $form-select-disabled-border-color;\n "]))),
|
|
4513
|
+
'.form-select-sm': css(_templateObject3$e || (_templateObject3$e = _taggedTemplateLiteral(["\n padding-top: $form-select-padding-y-sm;\n padding-bottom: $form-select-padding-y-sm;\n padding-left: $form-select-padding-x-sm;\n font-size: $form-select-font-size-sm;\n border-radius: $form-select-border-radius-sm;\n "]))),
|
|
4514
|
+
'.form-select-lg': css(_templateObject4$c || (_templateObject4$c = _taggedTemplateLiteral(["\n padding-top: $form-select-padding-y-lg;\n padding-bottom: $form-select-padding-y-lg;\n padding-left: $form-select-padding-x-lg;\n font-size: $form-select-font-size-lg;\n border-radius: $form-select-border-radius-lg;\n "])))
|
|
4476
4515
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4477
|
-
return _defineProperty({}, ".form-select.is-".concat(state), css(_templateObject5$
|
|
4516
|
+
return _defineProperty({}, ".form-select.is-".concat(state), css(_templateObject5$a || (_templateObject5$a = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", ";\n // box-shadow: $focus-box-shadow;\n }\n "])), function (t) {
|
|
4478
4517
|
return data(t).color;
|
|
4479
4518
|
}, function (t) {
|
|
4480
4519
|
return data(t).color;
|
|
4481
4520
|
}));
|
|
4482
4521
|
})), {}, {
|
|
4483
|
-
'.form-select-offcanvas': css(_templateObject6$
|
|
4484
|
-
'.form-select-offcanvas-body': css(_templateObject7$
|
|
4522
|
+
'.form-select-offcanvas': css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral([""]))),
|
|
4523
|
+
'.form-select-offcanvas-body': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n align-items: center;\n "])))
|
|
4485
4524
|
}));
|
|
4486
4525
|
var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4487
4526
|
var children = props.children,
|
|
@@ -4504,7 +4543,7 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
4504
4543
|
useNativeComponent = _props$useNativeCompo === void 0 ? false : _props$useNativeCompo,
|
|
4505
4544
|
style = props.style,
|
|
4506
4545
|
styleName = props.styleName,
|
|
4507
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4546
|
+
elementProps = _objectWithoutProperties(props, _excluded$M);
|
|
4508
4547
|
|
|
4509
4548
|
var _useState = React.useState(false),
|
|
4510
4549
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -4517,7 +4556,7 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
4517
4556
|
setOpen = _useState4[1];
|
|
4518
4557
|
|
|
4519
4558
|
var media = useMedia();
|
|
4520
|
-
var classes = getStyles(styles$
|
|
4559
|
+
var classes = getStyles(styles$B, ['.form-select', disabled && '.form-select-disabled', size === 'sm' && '.form-select-sm', size === 'lg' && '.form-select-lg', valid && '.form-select.is-valid', invalid && '.form-select.is-invalid']);
|
|
4521
4560
|
var resolveStyle = useStyle([classes, style], styleName);
|
|
4522
4561
|
var provideWebComponent = reactNative.Platform.OS === 'web' && !useNativeComponent;
|
|
4523
4562
|
var commonProps = {
|
|
@@ -4554,8 +4593,8 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
4554
4593
|
}, placeholder), children);
|
|
4555
4594
|
}
|
|
4556
4595
|
|
|
4557
|
-
var offcanvasClasses = getStyles(styles$
|
|
4558
|
-
var offcanvasBodyClasses = getStyles(styles$
|
|
4596
|
+
var offcanvasClasses = getStyles(styles$B, ['.form-select-offcanvas']);
|
|
4597
|
+
var offcanvasBodyClasses = getStyles(styles$B, ['.form-select-offcanvas-body']);
|
|
4559
4598
|
var items = React__default["default"].Children.map(children, function (child) {
|
|
4560
4599
|
return {
|
|
4561
4600
|
label: child.props.label,
|
|
@@ -4599,14 +4638,14 @@ var Picker = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
4599
4638
|
}, children)));
|
|
4600
4639
|
});
|
|
4601
4640
|
Picker.displayName = 'Picker';
|
|
4602
|
-
Picker.propTypes = propTypes$
|
|
4641
|
+
Picker.propTypes = propTypes$L;
|
|
4603
4642
|
Picker.Item = PickerItem;
|
|
4604
4643
|
|
|
4605
4644
|
var RadioContext = /*#__PURE__*/React__default["default"].createContext();
|
|
4606
4645
|
RadioContext.displayName = 'RadioContext';
|
|
4607
4646
|
|
|
4608
|
-
var _excluded$
|
|
4609
|
-
var propTypes$
|
|
4647
|
+
var _excluded$L = ["children", "value", "onChange", "disabled"];
|
|
4648
|
+
var propTypes$K = {
|
|
4610
4649
|
children: PropTypes__default["default"].node.isRequired,
|
|
4611
4650
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string]),
|
|
4612
4651
|
onChange: PropTypes__default["default"].func,
|
|
@@ -4619,7 +4658,7 @@ var RadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4619
4658
|
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
4620
4659
|
_props$disabled = props.disabled,
|
|
4621
4660
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
4622
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4661
|
+
elementProps = _objectWithoutProperties(props, _excluded$L);
|
|
4623
4662
|
|
|
4624
4663
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4625
4664
|
ref: ref,
|
|
@@ -4633,15 +4672,15 @@ var RadioGroup = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
4633
4672
|
}, children));
|
|
4634
4673
|
});
|
|
4635
4674
|
RadioGroup.displayName = 'RadioGroup';
|
|
4636
|
-
RadioGroup.propTypes = propTypes$
|
|
4675
|
+
RadioGroup.propTypes = propTypes$K;
|
|
4637
4676
|
|
|
4638
|
-
var _excluded$
|
|
4639
|
-
var propTypes$
|
|
4677
|
+
var _excluded$K = ["value"];
|
|
4678
|
+
var propTypes$J = {
|
|
4640
4679
|
value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].number, PropTypes__default["default"].string])
|
|
4641
4680
|
};
|
|
4642
4681
|
var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4643
4682
|
var value = props.value,
|
|
4644
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4683
|
+
elementProps = _objectWithoutProperties(props, _excluded$K);
|
|
4645
4684
|
|
|
4646
4685
|
var context = useForcedContext(RadioContext);
|
|
4647
4686
|
return /*#__PURE__*/React__default["default"].createElement(CheckInput, _extends({}, elementProps, {
|
|
@@ -4655,7 +4694,7 @@ var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
4655
4694
|
}));
|
|
4656
4695
|
});
|
|
4657
4696
|
Radio.displayName = 'Radio';
|
|
4658
|
-
Radio.propTypes = propTypes$
|
|
4697
|
+
Radio.propTypes = propTypes$J;
|
|
4659
4698
|
Radio.Group = RadioGroup;
|
|
4660
4699
|
|
|
4661
4700
|
var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
@@ -4668,8 +4707,8 @@ var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
4668
4707
|
});
|
|
4669
4708
|
Switch.displayName = 'Switch';
|
|
4670
4709
|
|
|
4671
|
-
var _excluded$
|
|
4672
|
-
var propTypes$
|
|
4710
|
+
var _excluded$J = ["onFocus", "onBlur", "style", "styleName"];
|
|
4711
|
+
var propTypes$I = {
|
|
4673
4712
|
onFocus: PropTypes__default["default"].func,
|
|
4674
4713
|
onBlur: PropTypes__default["default"].func,
|
|
4675
4714
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -4684,7 +4723,7 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
4684
4723
|
_onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
|
|
4685
4724
|
style = props.style,
|
|
4686
4725
|
styleName = props.styleName,
|
|
4687
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4726
|
+
elementProps = _objectWithoutProperties(props, _excluded$J);
|
|
4688
4727
|
|
|
4689
4728
|
var _useState = React.useState(false),
|
|
4690
4729
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -4714,12 +4753,12 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
4714
4753
|
}));
|
|
4715
4754
|
});
|
|
4716
4755
|
TextInput.displayName = 'TextInput';
|
|
4717
|
-
TextInput.propTypes = propTypes$
|
|
4756
|
+
TextInput.propTypes = propTypes$I;
|
|
4718
4757
|
|
|
4719
|
-
var _excluded$
|
|
4758
|
+
var _excluded$I = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "style"];
|
|
4720
4759
|
|
|
4721
|
-
var _templateObject$
|
|
4722
|
-
var propTypes$
|
|
4760
|
+
var _templateObject$B, _templateObject2$p, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6;
|
|
4761
|
+
var propTypes$H = {
|
|
4723
4762
|
size: PropTypes__default["default"].oneOf(['sm', 'lg']),
|
|
4724
4763
|
placeholderTextColor: PropTypes__default["default"].string,
|
|
4725
4764
|
multiline: PropTypes__default["default"].bool,
|
|
@@ -4729,16 +4768,16 @@ var propTypes$E = {
|
|
|
4729
4768
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4730
4769
|
style: PropTypes__default["default"].any
|
|
4731
4770
|
};
|
|
4732
|
-
var styles$
|
|
4733
|
-
'.form-control': css(_templateObject$
|
|
4734
|
-
'.form-control-disabled': css(_templateObject2$
|
|
4735
|
-
'.form-control-sm': css(_templateObject3$
|
|
4736
|
-
'.form-control-lg': css(_templateObject4$
|
|
4737
|
-
'.form-control-multiline': css(_templateObject5$
|
|
4738
|
-
'.form-control-multiline-sm': css(_templateObject6$
|
|
4739
|
-
'.form-control-multiline-lg': css(_templateObject7$
|
|
4771
|
+
var styles$A = StyleSheet.create(_objectSpread2({
|
|
4772
|
+
'.form-control': css(_templateObject$B || (_templateObject$B = _taggedTemplateLiteral(["\n // display: block;\n width: 100%;\n padding: $input-padding-y $input-padding-x;\n font-family: $input-font-family;\n font-size: $input-font-size;\n font-weight: $input-font-weight;\n line-height: $input-font-size * $input-line-height;\n color: $input-color;\n text-align-vertical: top; // added for bootstrap-rn\n background-color: $input-bg;\n // background-clip: padding-box;\n border: $input-border-width solid $input-border-color;\n @include platform(web) {\n appearance: none; // Fix appearance for date inputs in Safari\n }\n\n // Note: This has no effect on <select>s in some browsers, due to the limited stylability of \"<select>\"s in CSS.\n border-radius: $input-border-radius;\n\n // @include box-shadow($input-box-shadow);\n // @include transition($input-transition);\n\n // Customize the \":focus\" state to imitate native WebKit styles.\n &:focus {\n color: $input-focus-color;\n background-color: $input-focus-bg;\n border-color: $input-focus-border-color;\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n /* @if $enable-shadows {\n @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n } @else {\n // Avoid using mixin so we can pass custom focus shadow properly\n box-shadow: $input-focus-box-shadow;\n } */\n }\n "]))),
|
|
4773
|
+
'.form-control-disabled': css(_templateObject2$p || (_templateObject2$p = _taggedTemplateLiteral(["\n background-color: $input-disabled-bg;\n border-color: $input-disabled-border-color;\n // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n opacity: 1;\n "]))),
|
|
4774
|
+
'.form-control-sm': css(_templateObject3$d || (_templateObject3$d = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n padding: $input-padding-y-sm $input-padding-x-sm;\n font-size: $input-font-size-sm;\n border-radius: $input-border-radius-sm;\n "]))),
|
|
4775
|
+
'.form-control-lg': css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n padding: $input-padding-y-lg $input-padding-x-lg;\n font-size: $input-font-size-lg;\n border-radius: $input-border-radius-lg;\n "]))),
|
|
4776
|
+
'.form-control-multiline': css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n min-height: $input-height;\n "]))),
|
|
4777
|
+
'.form-control-multiline-sm': css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n "]))),
|
|
4778
|
+
'.form-control-multiline-lg': css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n "])))
|
|
4740
4779
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4741
|
-
return _defineProperty({}, ".form-control.is-".concat(state), css(_templateObject8$
|
|
4780
|
+
return _defineProperty({}, ".form-control.is-".concat(state), css(_templateObject8$6 || (_templateObject8$6 = _taggedTemplateLiteral(["\n border-color: ", ";\n\n &:focus {\n border-color: ", ";\n // box-shadow: $focus-box-shadow;\n }\n "])), function (t) {
|
|
4742
4781
|
return data(t).color;
|
|
4743
4782
|
}, function (t) {
|
|
4744
4783
|
return data(t).color;
|
|
@@ -4756,9 +4795,9 @@ var Input = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
4756
4795
|
_props$invalid = props.invalid,
|
|
4757
4796
|
invalid = _props$invalid === void 0 ? false : _props$invalid,
|
|
4758
4797
|
style = props.style,
|
|
4759
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4798
|
+
elementProps = _objectWithoutProperties(props, _excluded$I);
|
|
4760
4799
|
|
|
4761
|
-
var classes = getStyles(styles$
|
|
4800
|
+
var classes = getStyles(styles$A, ['.form-control', disabled && '.form-control-disabled', size === 'sm' && '.form-control-sm', size === 'lg' && '.form-control-lg', multiline && '.form-control-multiline', multiline && size === 'sm' && '.form-control-multiline-sm', multiline && size === 'lg' && '.form-control-multiline-lg', valid && '.form-control.is-valid', invalid && '.form-control.is-invalid']);
|
|
4762
4801
|
return /*#__PURE__*/React__default["default"].createElement(TextInput, _extends({}, elementProps, {
|
|
4763
4802
|
ref: ref,
|
|
4764
4803
|
placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
|
|
@@ -4768,40 +4807,40 @@ var Input = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
4768
4807
|
}));
|
|
4769
4808
|
});
|
|
4770
4809
|
Input.displayName = 'Input';
|
|
4771
|
-
Input.propTypes = propTypes$
|
|
4810
|
+
Input.propTypes = propTypes$H;
|
|
4772
4811
|
|
|
4773
|
-
var _excluded$
|
|
4812
|
+
var _excluded$H = ["children", "style"];
|
|
4774
4813
|
|
|
4775
|
-
var _templateObject$
|
|
4776
|
-
var propTypes$
|
|
4814
|
+
var _templateObject$A;
|
|
4815
|
+
var propTypes$G = {
|
|
4777
4816
|
children: PropTypes__default["default"].node.isRequired,
|
|
4778
4817
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4779
4818
|
style: PropTypes__default["default"].any
|
|
4780
4819
|
};
|
|
4781
|
-
var styles$
|
|
4782
|
-
'.form-label': css(_templateObject$
|
|
4820
|
+
var styles$z = StyleSheet.create({
|
|
4821
|
+
'.form-label': css(_templateObject$A || (_templateObject$A = _taggedTemplateLiteral(["\n margin-bottom: $form-label-margin-bottom;\n font-size: $form-label-font-size;\n font-style: $form-label-font-style;\n font-weight: $form-label-font-weight;\n color: $form-label-color;\n "])))
|
|
4783
4822
|
});
|
|
4784
4823
|
var Label = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4785
4824
|
var children = props.children,
|
|
4786
4825
|
style = props.style,
|
|
4787
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4826
|
+
elementProps = _objectWithoutProperties(props, _excluded$H);
|
|
4788
4827
|
|
|
4789
|
-
var classes = getStyles(styles$
|
|
4828
|
+
var classes = getStyles(styles$z, ['.form-label']);
|
|
4790
4829
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
4791
4830
|
ref: ref,
|
|
4792
4831
|
style: [classes, style]
|
|
4793
4832
|
}), children);
|
|
4794
4833
|
});
|
|
4795
4834
|
Label.displayName = 'Label';
|
|
4796
|
-
Label.propTypes = propTypes$
|
|
4835
|
+
Label.propTypes = propTypes$G;
|
|
4797
4836
|
|
|
4798
|
-
var _excluded$
|
|
4837
|
+
var _excluded$G = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
|
|
4799
4838
|
|
|
4800
|
-
var _templateObject$
|
|
4839
|
+
var _templateObject$z, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8;
|
|
4801
4840
|
var sizes = makeArray(GRID_COLUMNS).map(function (v) {
|
|
4802
4841
|
return v + 1;
|
|
4803
4842
|
});
|
|
4804
|
-
var propTypes$
|
|
4843
|
+
var propTypes$F = {
|
|
4805
4844
|
children: PropTypes__default["default"].node.isRequired,
|
|
4806
4845
|
size: PropTypes__default["default"].oneOf(['auto'].concat(_toConsumableArray(sizes))),
|
|
4807
4846
|
sizeSm: PropTypes__default["default"].oneOf(['auto'].concat(_toConsumableArray(sizes))),
|
|
@@ -4811,15 +4850,15 @@ var propTypes$C = {
|
|
|
4811
4850
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4812
4851
|
style: PropTypes__default["default"].any
|
|
4813
4852
|
};
|
|
4814
|
-
var styles$
|
|
4815
|
-
'*': css(_templateObject$
|
|
4853
|
+
var styles$y = StyleSheet.create(_objectSpread2({
|
|
4854
|
+
'*': css(_templateObject$z || (_templateObject$z = _taggedTemplateLiteral(["\n // Add box sizing if only the grid is loaded\n /* box-sizing: if(\n variable-exists(include-column-box-sizing) and $include-column-box-sizing,\n border-box,\n null\n ); */\n // Prevent columns from becoming too narrow when at smaller grid tiers by\n // always setting \"width: 100%;\". This works because we set the width\n // later on to override this initial width.\n flex-shrink: 0;\n width: 100%;\n max-width: 100%; // Prevent \".col-auto\", \".col\" (& responsive variants) from breaking out the grid\n padding-right: $grid-gutter-width * 0.5;\n padding-left: $grid-gutter-width * 0.5;\n margin-top: 0;\n "])))
|
|
4816
4855
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4817
4856
|
var _objectSpread2$1;
|
|
4818
4857
|
|
|
4819
|
-
return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$
|
|
4858
|
+
return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex: 1 0 0%; // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4\n }\n "])), breakpoint)), _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint), "-auto"), css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex: 0 0 auto;\n width: auto;\n }\n "])), breakpoint)), _objectSpread2$1), normalize$1(makeArray(GRID_COLUMNS - 1, function (i) {
|
|
4820
4859
|
var _ref;
|
|
4821
4860
|
|
|
4822
|
-
return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$
|
|
4861
|
+
return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$a || (_templateObject4$a = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex: 0 0 auto;\n width: ", "%;\n }\n "])), breakpoint, (i + 1) / GRID_COLUMNS * 100)), _defineProperty(_ref, ".offset".concat(infix(breakpoint), "-").concat(i), css(_templateObject5$8 || (_templateObject5$8 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n margin-left: ", "%;\n }\n "])), breakpoint, i / GRID_COLUMNS * 100)), _ref;
|
|
4823
4862
|
})));
|
|
4824
4863
|
})));
|
|
4825
4864
|
var Col = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
@@ -4830,50 +4869,50 @@ var Col = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref
|
|
|
4830
4869
|
sizeLg = props.sizeLg,
|
|
4831
4870
|
sizeXl = props.sizeXl,
|
|
4832
4871
|
style = props.style,
|
|
4833
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4872
|
+
elementProps = _objectWithoutProperties(props, _excluded$G);
|
|
4834
4873
|
|
|
4835
|
-
var classes = getStyles(styles$
|
|
4874
|
+
var classes = getStyles(styles$y, ['*', ".col-".concat(size.toString()), sizeSm && ".col-sm-".concat(sizeSm.toString()), sizeMd && ".col-md-".concat(sizeMd.toString()), sizeLg && ".col-lg-".concat(sizeLg.toString()), sizeXl && ".col-xl-".concat(sizeXl.toString())]);
|
|
4836
4875
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4837
4876
|
ref: ref,
|
|
4838
4877
|
style: [classes, style]
|
|
4839
4878
|
}), children);
|
|
4840
4879
|
});
|
|
4841
4880
|
Col.displayName = 'Col';
|
|
4842
|
-
Col.propTypes = propTypes$
|
|
4881
|
+
Col.propTypes = propTypes$F;
|
|
4843
4882
|
|
|
4844
|
-
var _excluded$
|
|
4883
|
+
var _excluded$F = ["children", "style"];
|
|
4845
4884
|
|
|
4846
|
-
var _templateObject$
|
|
4847
|
-
var propTypes$
|
|
4885
|
+
var _templateObject$y;
|
|
4886
|
+
var propTypes$E = {
|
|
4848
4887
|
children: PropTypes__default["default"].node.isRequired,
|
|
4849
4888
|
rows: PropTypes__default["default"].number,
|
|
4850
4889
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4851
4890
|
style: PropTypes__default["default"].any
|
|
4852
4891
|
};
|
|
4853
|
-
var styles$
|
|
4854
|
-
'.row': css(_templateObject$
|
|
4892
|
+
var styles$x = StyleSheet.create({
|
|
4893
|
+
'.row': css(_templateObject$y || (_templateObject$y = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-wrap: wrap;\n margin-top: 0;\n margin-right: -0.5 * $grid-gutter-width;\n margin-left: -0.5 * $grid-gutter-width;\n "])))
|
|
4855
4894
|
});
|
|
4856
4895
|
var Row = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4857
4896
|
var children = props.children,
|
|
4858
4897
|
style = props.style,
|
|
4859
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4898
|
+
elementProps = _objectWithoutProperties(props, _excluded$F);
|
|
4860
4899
|
|
|
4861
|
-
var classes = getStyles(styles$
|
|
4900
|
+
var classes = getStyles(styles$x, ['.row']);
|
|
4862
4901
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4863
4902
|
ref: ref,
|
|
4864
4903
|
style: [classes, style]
|
|
4865
4904
|
}), children);
|
|
4866
4905
|
});
|
|
4867
4906
|
Row.displayName = 'Row';
|
|
4868
|
-
Row.propTypes = propTypes$
|
|
4907
|
+
Row.propTypes = propTypes$E;
|
|
4869
4908
|
|
|
4870
4909
|
var ListGroupContext = /*#__PURE__*/React__default["default"].createContext();
|
|
4871
4910
|
ListGroupContext.displayName = 'ListGroupContext';
|
|
4872
4911
|
|
|
4873
|
-
var _excluded$
|
|
4912
|
+
var _excluded$E = ["children", "color", "active", "first", "last", "disabled", "style"];
|
|
4874
4913
|
|
|
4875
|
-
var _templateObject$
|
|
4876
|
-
var propTypes$
|
|
4914
|
+
var _templateObject$x, _templateObject2$n, _templateObject3$b, _templateObject4$9, _templateObject5$7, _templateObject6$7, _templateObject7$5, _templateObject8$5, _templateObject9$3, _templateObject10$3, _templateObject11$2, _templateObject12$2, _templateObject13$2, _templateObject14$2;
|
|
4915
|
+
var propTypes$D = {
|
|
4877
4916
|
children: PropTypes__default["default"].node.isRequired,
|
|
4878
4917
|
color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
|
|
4879
4918
|
active: PropTypes__default["default"].bool,
|
|
@@ -4883,25 +4922,25 @@ var propTypes$A = {
|
|
|
4883
4922
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4884
4923
|
style: PropTypes__default["default"].any
|
|
4885
4924
|
};
|
|
4886
|
-
var styles$
|
|
4887
|
-
'.list-group-item': css(_templateObject$
|
|
4888
|
-
'.list-group-item-text': css(_templateObject2$
|
|
4889
|
-
'.list-group-item-first': css(_templateObject3$
|
|
4890
|
-
'.list-group-item-last': css(_templateObject4$
|
|
4891
|
-
'.list-group-item-disabled': css(_templateObject5$
|
|
4892
|
-
'.list-group-item-disabled-text': css(_templateObject6$
|
|
4893
|
-
'.list-group-item-active': css(_templateObject7$
|
|
4894
|
-
'.list-group-item-active-text': css(_templateObject8$
|
|
4895
|
-
'.list-group-item-not-first': css(_templateObject9$
|
|
4896
|
-
'.list-group-item-not-first-active': css(_templateObject10$
|
|
4897
|
-
'.list-group-item-flush': css(_templateObject11$
|
|
4898
|
-
'.list-group-item-flush-last': css(_templateObject12$
|
|
4925
|
+
var styles$w = StyleSheet.create(_objectSpread2({
|
|
4926
|
+
'.list-group-item': css(_templateObject$x || (_templateObject$x = _taggedTemplateLiteral(["\n position: relative;\n // display: block;\n padding: $list-group-item-padding-y $list-group-item-padding-x;\n background-color: $list-group-bg;\n border: $list-group-border-width solid $list-group-border-color;\n "]))),
|
|
4927
|
+
'.list-group-item-text': css(_templateObject2$n || (_templateObject2$n = _taggedTemplateLiteral(["\n color: $list-group-color;\n text-decoration: none; // if($link-decoration == none, null, none);\n "]))),
|
|
4928
|
+
'.list-group-item-first': css(_templateObject3$b || (_templateObject3$b = _taggedTemplateLiteral(["\n border-top-left-radius: $list-group-border-radius;\n border-top-right-radius: $list-group-border-radius;\n "]))),
|
|
4929
|
+
'.list-group-item-last': css(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteral(["\n border-bottom-left-radius: $list-group-border-radius;\n border-bottom-right-radius: $list-group-border-radius;\n "]))),
|
|
4930
|
+
'.list-group-item-disabled': css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n // pointer-events: none;\n background-color: $list-group-disabled-bg;\n "]))),
|
|
4931
|
+
'.list-group-item-disabled-text': css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n color: $list-group-disabled-color;\n "]))),
|
|
4932
|
+
'.list-group-item-active': css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteral(["\n z-index: 2; // Place active items above their siblings for proper border styling\n background-color: $list-group-active-bg;\n border-color: $list-group-active-border-color;\n "]))),
|
|
4933
|
+
'.list-group-item-active-text': css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n color: $list-group-active-color;\n "]))),
|
|
4934
|
+
'.list-group-item-not-first': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n border-top-width: 0;\n "]))),
|
|
4935
|
+
'.list-group-item-not-first-active': css(_templateObject10$3 || (_templateObject10$3 = _taggedTemplateLiteral(["\n margin-top: -$list-group-border-width;\n border-top-width: $list-group-border-width;\n "]))),
|
|
4936
|
+
'.list-group-item-flush': css(_templateObject11$2 || (_templateObject11$2 = _taggedTemplateLiteral(["\n border-top-left-radius: 0; // added for bootstrap-rn\n border-top-right-radius: 0; // added for bootstrap-rn\n border-bottom-left-radius: 0; // added for bootstrap-rn\n border-bottom-right-radius: 0; // added for bootstrap-rn\n border-top-width: 0;\n border-right-width: 0;\n border-bottom-width: $list-group-border-width;\n border-left-width: 0;\n "]))),
|
|
4937
|
+
'.list-group-item-flush-last': css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n border-bottom-width: 0;\n "])))
|
|
4899
4938
|
}, each(THEME_COLORS, function (state, value) {
|
|
4900
4939
|
var _ref;
|
|
4901
4940
|
|
|
4902
|
-
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$
|
|
4941
|
+
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
|
|
4903
4942
|
return shiftColor(t['list-group-item-bg-scale'], value(t));
|
|
4904
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css(_templateObject14$
|
|
4943
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
4905
4944
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4906
4945
|
})), _ref;
|
|
4907
4946
|
})));
|
|
@@ -4917,13 +4956,13 @@ var ListGroupItem = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
4917
4956
|
_props$disabled = props.disabled,
|
|
4918
4957
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
4919
4958
|
style = props.style,
|
|
4920
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4959
|
+
elementProps = _objectWithoutProperties(props, _excluded$E);
|
|
4921
4960
|
|
|
4922
4961
|
var _useForcedContext = useForcedContext(ListGroupContext),
|
|
4923
4962
|
flush = _useForcedContext.flush;
|
|
4924
4963
|
|
|
4925
|
-
var classes = getStyles(styles$
|
|
4926
|
-
var textClasses = getStyles(styles$
|
|
4964
|
+
var classes = getStyles(styles$w, ['.list-group-item', first && '.list-group-item-first', last && '.list-group-item-last', active && '.list-group-item-active', disabled && '.list-group-item-disabled', !first && '.list-group-item-not-first', !first && active && '.list-group-item-not-first-active', flush && '.list-group-item-flush', flush && last && '.list-group-item-flush-last', color && ".list-group-item-".concat(color)]);
|
|
4965
|
+
var textClasses = getStyles(styles$w, ['.list-group-item-text', active && '.list-group-item-active-text', disabled && '.list-group-item-disabled-text', color && ".list-group-item-".concat(color, "-text")]);
|
|
4927
4966
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
4928
4967
|
ref: ref,
|
|
4929
4968
|
style: [classes, style]
|
|
@@ -4932,12 +4971,12 @@ var ListGroupItem = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
4932
4971
|
}, children));
|
|
4933
4972
|
});
|
|
4934
4973
|
ListGroupItem.displayName = 'ListGroupItem';
|
|
4935
|
-
ListGroupItem.propTypes = propTypes$
|
|
4974
|
+
ListGroupItem.propTypes = propTypes$D;
|
|
4936
4975
|
|
|
4937
|
-
var _excluded$
|
|
4976
|
+
var _excluded$D = ["children", "color", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
4938
4977
|
|
|
4939
|
-
var _templateObject$
|
|
4940
|
-
var propTypes$
|
|
4978
|
+
var _templateObject$w, _templateObject2$m, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$6;
|
|
4979
|
+
var propTypes$C = {
|
|
4941
4980
|
children: PropTypes__default["default"].node.isRequired,
|
|
4942
4981
|
color: PropTypes__default["default"].oneOf(Object.keys(THEME_COLORS)),
|
|
4943
4982
|
first: PropTypes__default["default"].bool,
|
|
@@ -4954,24 +4993,24 @@ var propTypes$z = {
|
|
|
4954
4993
|
activeTextStyle: PropTypes__default["default"].any
|
|
4955
4994
|
};
|
|
4956
4995
|
var actionStyles = StyleSheet.create(_objectSpread2({
|
|
4957
|
-
'.list-group-item-action': css(_templateObject$
|
|
4958
|
-
'.list-group-item-action-text': css(_templateObject2$
|
|
4996
|
+
'.list-group-item-action': css(_templateObject$w || (_templateObject$w = _taggedTemplateLiteral(["\n width: 100%; // For \"<button>\"s (anchors become 100% by default though)\n\n // Hover state\n &:hover {\n z-index: 1; // Place hover/focus items above their siblings for proper border styling\n background-color: $list-group-hover-bg;\n }\n\n &:focus {\n z-index: 1; // Place hover/focus items above their siblings for proper border styling\n background-color: $list-group-hover-bg;\n }\n\n &:active {\n background-color: $list-group-action-active-bg;\n }\n "]))),
|
|
4997
|
+
'.list-group-item-action-text': css(_templateObject2$m || (_templateObject2$m = _taggedTemplateLiteral(["\n color: $list-group-action-color;\n // text-align: inherit; // For \"<button>\"s (anchors inherit)\n\n // Hover state\n &:hover {\n color: $list-group-action-hover-color;\n text-decoration: none;\n }\n\n &:focus {\n color: $list-group-action-hover-color;\n text-decoration: none;\n }\n\n &:active {\n color: $list-group-action-active-color;\n }\n "])))
|
|
4959
4998
|
}, each(THEME_COLORS, function (state, value) {
|
|
4960
4999
|
var _ref;
|
|
4961
5000
|
|
|
4962
|
-
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state, "-action"), css(_templateObject3$
|
|
5001
|
+
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state, "-action"), css(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteral(["\n &:hover {\n background-color: ", ";\n }\n\n &:focus {\n background-color: ", ";\n }\n "])), function (t) {
|
|
4963
5002
|
return shadeColor(0.1, shiftColor(t['list-group-item-bg-scale'], value(t)));
|
|
4964
5003
|
}, function (t) {
|
|
4965
5004
|
return shadeColor(0.1, shiftColor(t['list-group-item-bg-scale'], value(t)));
|
|
4966
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-text"), css(_templateObject4$
|
|
5005
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-text"), css(_templateObject4$8 || (_templateObject4$8 = _taggedTemplateLiteral(["\n &:hover {\n color: ", ";\n }\n\n &:focus {\n color: ", ";\n }\n "])), function (t) {
|
|
4967
5006
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4968
5007
|
}, function (t) {
|
|
4969
5008
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4970
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active"), css(_templateObject5$
|
|
5009
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active"), css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), function (t) {
|
|
4971
5010
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4972
5011
|
}, function (t) {
|
|
4973
5012
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4974
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active-text"), css(_templateObject6$
|
|
5013
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active-text"), css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n color: $white;\n "])))), _ref;
|
|
4975
5014
|
})));
|
|
4976
5015
|
var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
4977
5016
|
var _useModifier = useModifier('useTabbable', props, ref),
|
|
@@ -4993,12 +5032,12 @@ var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
|
4993
5032
|
activeStyle = modifierProps.activeStyle,
|
|
4994
5033
|
textStyle = modifierProps.textStyle,
|
|
4995
5034
|
activeTextStyle = modifierProps.activeTextStyle,
|
|
4996
|
-
elementProps = _objectWithoutProperties(modifierProps, _excluded$
|
|
5035
|
+
elementProps = _objectWithoutProperties(modifierProps, _excluded$D);
|
|
4997
5036
|
|
|
4998
5037
|
var _useForcedContext = useForcedContext(ListGroupContext),
|
|
4999
5038
|
flush = _useForcedContext.flush;
|
|
5000
5039
|
|
|
5001
|
-
var styles = _objectSpread2(_objectSpread2({}, styles$
|
|
5040
|
+
var styles = _objectSpread2(_objectSpread2({}, styles$w), actionStyles);
|
|
5002
5041
|
|
|
5003
5042
|
var classes = getStyles(styles, ['.list-group-item', '.list-group-item-action', first && '.list-group-item-first', last && '.list-group-item-last', disabled && '.list-group-item-disabled', !first && '.list-group-item-not-first', !first && active && '.list-group-item-not-first-active', flush && '.list-group-item-flush', flush && last && '.list-group-item-flush-last', color && ".list-group-item-".concat(color), color && ".list-group-item-".concat(color, "-action")]);
|
|
5004
5043
|
var activeClasses = getStyles(styles, ['.list-group-item-active', color && ".list-group-item-".concat(color, "-action-active")]);
|
|
@@ -5015,28 +5054,28 @@ var ListGroupItemAction = /*#__PURE__*/React__default["default"].forwardRef(func
|
|
|
5015
5054
|
}), children);
|
|
5016
5055
|
});
|
|
5017
5056
|
ListGroupItemAction.displayName = 'ListGroupItemAction';
|
|
5018
|
-
ListGroupItemAction.propTypes = propTypes$
|
|
5057
|
+
ListGroupItemAction.propTypes = propTypes$C;
|
|
5019
5058
|
|
|
5020
|
-
var _excluded$
|
|
5059
|
+
var _excluded$C = ["children", "flush", "style"];
|
|
5021
5060
|
|
|
5022
|
-
var _templateObject$
|
|
5023
|
-
var propTypes$
|
|
5061
|
+
var _templateObject$v, _templateObject2$l;
|
|
5062
|
+
var propTypes$B = {
|
|
5024
5063
|
children: PropTypes__default["default"].node.isRequired,
|
|
5025
5064
|
flush: PropTypes__default["default"].bool,
|
|
5026
5065
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5027
5066
|
style: PropTypes__default["default"].any
|
|
5028
5067
|
};
|
|
5029
|
-
var styles$
|
|
5030
|
-
'.list-group': css(_templateObject$
|
|
5031
|
-
'.list-group-flush': css(_templateObject2$
|
|
5068
|
+
var styles$v = StyleSheet.create({
|
|
5069
|
+
'.list-group': css(_templateObject$v || (_templateObject$v = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n\n // No need to set list-style: none; since .list-group-item is block level\n padding-left: 0; // reset padding because ul and ol\n margin-bottom: 0;\n border-radius: $list-group-border-radius;\n "]))),
|
|
5070
|
+
'.list-group-flush': css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n border-radius: 0;\n "])))
|
|
5032
5071
|
});
|
|
5033
5072
|
var ListGroup = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5034
5073
|
var children = props.children,
|
|
5035
5074
|
flush = props.flush,
|
|
5036
5075
|
style = props.style,
|
|
5037
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5076
|
+
elementProps = _objectWithoutProperties(props, _excluded$C);
|
|
5038
5077
|
|
|
5039
|
-
var classes = getStyles(styles$
|
|
5078
|
+
var classes = getStyles(styles$v, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
|
|
5040
5079
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5041
5080
|
ref: ref,
|
|
5042
5081
|
accessibilityRole: null,
|
|
@@ -5048,52 +5087,52 @@ var ListGroup = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
5048
5087
|
}, makeListChildren(children)));
|
|
5049
5088
|
});
|
|
5050
5089
|
ListGroup.displayName = 'ListGroup';
|
|
5051
|
-
ListGroup.propTypes = propTypes$
|
|
5090
|
+
ListGroup.propTypes = propTypes$B;
|
|
5052
5091
|
ListGroup.Item = ListGroupItem;
|
|
5053
5092
|
ListGroup.ItemAction = ListGroupItemAction;
|
|
5054
5093
|
|
|
5055
|
-
var _excluded$
|
|
5094
|
+
var _excluded$B = ["children", "style"];
|
|
5056
5095
|
|
|
5057
|
-
var _templateObject$
|
|
5058
|
-
var propTypes$
|
|
5096
|
+
var _templateObject$u;
|
|
5097
|
+
var propTypes$A = {
|
|
5059
5098
|
children: PropTypes__default["default"].node.isRequired,
|
|
5060
5099
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5061
5100
|
style: PropTypes__default["default"].any
|
|
5062
5101
|
};
|
|
5063
|
-
var styles$
|
|
5064
|
-
'.modal-header': css(_templateObject$
|
|
5102
|
+
var styles$u = StyleSheet.create({
|
|
5103
|
+
'.modal-header': css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-shrink: 0;\n align-items: center;\n justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends\n padding: $modal-header-padding;\n border-bottom-width: $modal-header-border-width;\n border-style: solid;\n border-color: $modal-header-border-color;\n border-top-left-radius: $modal-content-inner-border-radius;\n border-top-right-radius: $modal-content-inner-border-radius;\n "])))
|
|
5065
5104
|
});
|
|
5066
5105
|
var ModalHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5067
5106
|
var children = props.children,
|
|
5068
5107
|
style = props.style,
|
|
5069
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5108
|
+
elementProps = _objectWithoutProperties(props, _excluded$B);
|
|
5070
5109
|
|
|
5071
|
-
var classes = getStyles(styles$
|
|
5110
|
+
var classes = getStyles(styles$u, ['.modal-header']);
|
|
5072
5111
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5073
5112
|
ref: ref,
|
|
5074
5113
|
style: [classes, style]
|
|
5075
5114
|
}), children);
|
|
5076
5115
|
});
|
|
5077
5116
|
ModalHeader.displayName = 'ModalHeader';
|
|
5078
|
-
ModalHeader.propTypes = propTypes$
|
|
5117
|
+
ModalHeader.propTypes = propTypes$A;
|
|
5079
5118
|
|
|
5080
|
-
var _excluded$
|
|
5119
|
+
var _excluded$A = ["children", "style"];
|
|
5081
5120
|
|
|
5082
|
-
var _templateObject$
|
|
5083
|
-
var propTypes$
|
|
5121
|
+
var _templateObject$t;
|
|
5122
|
+
var propTypes$z = {
|
|
5084
5123
|
children: PropTypes__default["default"].node.isRequired,
|
|
5085
5124
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5086
5125
|
style: PropTypes__default["default"].any
|
|
5087
5126
|
};
|
|
5088
|
-
var styles$
|
|
5089
|
-
'.modal-title': css(_templateObject$
|
|
5127
|
+
var styles$t = StyleSheet.create({
|
|
5128
|
+
'.modal-title': css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n margin-bottom: 0;\n line-height: $font-size-base * $modal-title-line-height;\n "])))
|
|
5090
5129
|
});
|
|
5091
5130
|
var ModalTitle = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5092
5131
|
var children = props.children,
|
|
5093
5132
|
style = props.style,
|
|
5094
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5133
|
+
elementProps = _objectWithoutProperties(props, _excluded$A);
|
|
5095
5134
|
|
|
5096
|
-
var classes = getStyles(styles$
|
|
5135
|
+
var classes = getStyles(styles$t, ['.modal-title']);
|
|
5097
5136
|
return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({
|
|
5098
5137
|
size: 5
|
|
5099
5138
|
}, elementProps, {
|
|
@@ -5102,63 +5141,63 @@ var ModalTitle = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
5102
5141
|
}), children);
|
|
5103
5142
|
});
|
|
5104
5143
|
ModalTitle.displayName = 'ModalTitle';
|
|
5105
|
-
ModalTitle.propTypes = propTypes$
|
|
5144
|
+
ModalTitle.propTypes = propTypes$z;
|
|
5106
5145
|
|
|
5107
|
-
var _excluded$
|
|
5146
|
+
var _excluded$z = ["children", "style"];
|
|
5108
5147
|
|
|
5109
|
-
var _templateObject$
|
|
5110
|
-
var propTypes$
|
|
5148
|
+
var _templateObject$s;
|
|
5149
|
+
var propTypes$y = {
|
|
5111
5150
|
children: PropTypes__default["default"].node.isRequired,
|
|
5112
5151
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5113
5152
|
style: PropTypes__default["default"].any
|
|
5114
5153
|
};
|
|
5115
|
-
var styles$
|
|
5116
|
-
'.modal-body': css(_templateObject$
|
|
5154
|
+
var styles$s = StyleSheet.create({
|
|
5155
|
+
'.modal-body': css(_templateObject$s || (_templateObject$s = _taggedTemplateLiteral(["\n position: relative;\n // Enable \"flex-grow: 1\" so that the body take up as much space as possible\n // when there should be a fixed height on \".modal-dialog\".\n flex: 1 1 auto;\n padding: $modal-inner-padding;\n "])))
|
|
5117
5156
|
});
|
|
5118
5157
|
var ModalBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5119
5158
|
var children = props.children,
|
|
5120
5159
|
style = props.style,
|
|
5121
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5160
|
+
elementProps = _objectWithoutProperties(props, _excluded$z);
|
|
5122
5161
|
|
|
5123
|
-
var classes = getStyles(styles$
|
|
5162
|
+
var classes = getStyles(styles$s, ['.modal-body']);
|
|
5124
5163
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5125
5164
|
ref: ref,
|
|
5126
5165
|
style: [classes, style]
|
|
5127
5166
|
}), children);
|
|
5128
5167
|
});
|
|
5129
5168
|
ModalBody.displayName = 'ModalBody';
|
|
5130
|
-
ModalBody.propTypes = propTypes$
|
|
5169
|
+
ModalBody.propTypes = propTypes$y;
|
|
5131
5170
|
|
|
5132
|
-
var _excluded$
|
|
5171
|
+
var _excluded$y = ["children", "style"];
|
|
5133
5172
|
|
|
5134
|
-
var _templateObject$
|
|
5135
|
-
var propTypes$
|
|
5173
|
+
var _templateObject$r;
|
|
5174
|
+
var propTypes$x = {
|
|
5136
5175
|
children: PropTypes__default["default"].node.isRequired,
|
|
5137
5176
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5138
5177
|
style: PropTypes__default["default"].any
|
|
5139
5178
|
};
|
|
5140
|
-
var styles$
|
|
5141
|
-
'.modal-footer': css(_templateObject$
|
|
5179
|
+
var styles$r = StyleSheet.create({
|
|
5180
|
+
'.modal-footer': css(_templateObject$r || (_templateObject$r = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-shrink: 0;\n flex-wrap: wrap;\n align-items: center; // vertically center\n justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items\n padding: $modal-inner-padding;\n border-top-width: $modal-footer-border-width;\n border-style: solid;\n border-color: $modal-footer-border-color;\n border-bottom-start-radius: $modal-content-inner-border-radius;\n border-bottom-end-radius: $modal-content-inner-border-radius;\n "])))
|
|
5142
5181
|
});
|
|
5143
5182
|
var ModalFooter = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5144
5183
|
var children = props.children,
|
|
5145
5184
|
style = props.style,
|
|
5146
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5185
|
+
elementProps = _objectWithoutProperties(props, _excluded$y);
|
|
5147
5186
|
|
|
5148
|
-
var classes = getStyles(styles$
|
|
5187
|
+
var classes = getStyles(styles$r, ['.modal-footer']);
|
|
5149
5188
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5150
5189
|
ref: ref,
|
|
5151
5190
|
style: [classes, style]
|
|
5152
5191
|
}), children);
|
|
5153
5192
|
});
|
|
5154
5193
|
ModalFooter.displayName = 'ModalFooter';
|
|
5155
|
-
ModalFooter.propTypes = propTypes$
|
|
5194
|
+
ModalFooter.propTypes = propTypes$x;
|
|
5156
5195
|
|
|
5157
|
-
var _excluded$
|
|
5196
|
+
var _excluded$x = ["children", "visible", "size", "backdrop", "onToggle", "style"];
|
|
5158
5197
|
|
|
5159
|
-
var _templateObject$
|
|
5198
|
+
var _templateObject$q, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$5, _templateObject7$4, _templateObject8$4;
|
|
5160
5199
|
var MODAL_SIZES = ['sm', 'lg', 'xl'];
|
|
5161
|
-
var propTypes$
|
|
5200
|
+
var propTypes$w = {
|
|
5162
5201
|
children: PropTypes__default["default"].node.isRequired,
|
|
5163
5202
|
visible: PropTypes__default["default"].bool.isRequired,
|
|
5164
5203
|
size: PropTypes__default["default"].oneOf(MODAL_SIZES),
|
|
@@ -5169,15 +5208,15 @@ var propTypes$t = {
|
|
|
5169
5208
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5170
5209
|
style: PropTypes__default["default"].any
|
|
5171
5210
|
};
|
|
5172
|
-
var styles$
|
|
5173
|
-
'.modal': css(_templateObject$
|
|
5174
|
-
'.modal-dialog': css(_templateObject2$
|
|
5175
|
-
'.modal-content': css(_templateObject3$
|
|
5176
|
-
'.modal-content-text': css(_templateObject4$
|
|
5177
|
-
'.modal-backdrop': css(_templateObject5$
|
|
5178
|
-
'.modal-sm': css(_templateObject6$
|
|
5179
|
-
'.modal-lg': css(_templateObject7$
|
|
5180
|
-
'.modal-xl': css(_templateObject8$
|
|
5211
|
+
var styles$q = StyleSheet.create({
|
|
5212
|
+
'.modal': css(_templateObject$q || (_templateObject$q = _taggedTemplateLiteral(["\n position: absolute; // fixed;\n top: 0;\n left: 0;\n z-index: $zindex-modal;\n // display: none;\n width: 100%;\n height: 100%;\n // overflow-x: hidden;\n // overflow-y: auto;\n // Prevent Chrome on Windows from adding a focus outline. For details, see\n // https://github.com/twbs/bootstrap/pull/10951.\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n // We deliberately don't use \"-webkit-overflow-scrolling: touch;\" due to a\n // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342\n // See also https://github.com/twbs/bootstrap/issues/17695\n "]))),
|
|
5213
|
+
'.modal-dialog': css(_templateObject2$k || (_templateObject2$k = _taggedTemplateLiteral(["\n position: relative;\n width: auto;\n margin: $modal-dialog-margin;\n // allow clicks to pass through for custom click handling to close modal\n // pointer-events: none;\n align-self: center; // added for bootstrap-rn\n\n @include media-breakpoint-up(sm) {\n max-width: $modal-md;\n margin: $modal-dialog-margin-y-sm-up;\n }\n "]))),
|
|
5214
|
+
'.modal-content': css(_templateObject3$9 || (_templateObject3$9 = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-direction: column;\n width: 100%; // Ensure \".modal-content\" extends the full width of the parent \".modal-dialog\"\n // counteract the pointer-events: none; in the .modal-dialog\n // pointer-events: auto;\n background-color: $modal-content-bg;\n // background-clip: padding-box;\n border: $modal-content-border-width solid $modal-content-border-color;\n border-radius: $modal-content-border-radius;\n // @include box-shadow($modal-content-box-shadow-xs);\n // Remove focus outline from opened modal\n // outline: 0;\n\n @include media-breakpoint-up(sm) {\n // @include box-shadow($modal-content-box-shadow-sm-up);\n }\n "]))),
|
|
5215
|
+
'.modal-content-text': css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n color: $modal-content-color;\n "]))),
|
|
5216
|
+
'.modal-backdrop': css(_templateObject5$5 || (_templateObject5$5 = _taggedTemplateLiteral(["\n position: absolute;\n top: 0;\n left: 0;\n z-index: $zindex-modal-backdrop;\n width: 100%;\n height: 100%;\n background-color: $modal-backdrop-bg;\n opacity: $modal-backdrop-opacity;\n "]))),
|
|
5217
|
+
'.modal-sm': css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: $modal-sm;\n }\n "]))),
|
|
5218
|
+
'.modal-lg': css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n "]))),
|
|
5219
|
+
'.modal-xl': css(_templateObject8$4 || (_templateObject8$4 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n @include media-breakpoint-up(xl) {\n max-width: $modal-xl;\n }\n "])))
|
|
5181
5220
|
});
|
|
5182
5221
|
var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5183
5222
|
var children = props.children,
|
|
@@ -5187,13 +5226,13 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
5187
5226
|
backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
|
|
5188
5227
|
onToggle = props.onToggle,
|
|
5189
5228
|
style = props.style,
|
|
5190
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5229
|
+
elementProps = _objectWithoutProperties(props, _excluded$x);
|
|
5191
5230
|
|
|
5192
|
-
var backdropClasses = getStyles(styles$
|
|
5193
|
-
var classes = getStyles(styles$
|
|
5194
|
-
var dialogClasses = getStyles(styles$
|
|
5195
|
-
var contentClasses = getStyles(styles$
|
|
5196
|
-
var contentTextClasses = getStyles(styles$
|
|
5231
|
+
var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
|
|
5232
|
+
var classes = getStyles(styles$q, ['.modal']);
|
|
5233
|
+
var dialogClasses = getStyles(styles$q, ['.modal-dialog', size === 'sm' && '.modal-sm', size === 'lg' && '.modal-lg', size === 'xl' && '.modal-xl']);
|
|
5234
|
+
var contentClasses = getStyles(styles$q, ['.modal-content']);
|
|
5235
|
+
var contentTextClasses = getStyles(styles$q, ['.modal-content-text']);
|
|
5197
5236
|
return /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
|
|
5198
5237
|
transparent: true,
|
|
5199
5238
|
visible: visible,
|
|
@@ -5212,7 +5251,7 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
5212
5251
|
}, children)))));
|
|
5213
5252
|
});
|
|
5214
5253
|
Modal.displayName = 'Modal';
|
|
5215
|
-
Modal.propTypes = propTypes$
|
|
5254
|
+
Modal.propTypes = propTypes$w;
|
|
5216
5255
|
Modal.Header = ModalHeader;
|
|
5217
5256
|
Modal.Title = ModalTitle;
|
|
5218
5257
|
Modal.Body = ModalBody;
|
|
@@ -5221,10 +5260,10 @@ Modal.Footer = ModalFooter;
|
|
|
5221
5260
|
var NavContext = /*#__PURE__*/React__default["default"].createContext();
|
|
5222
5261
|
NavContext.displayName = 'NavContext';
|
|
5223
5262
|
|
|
5224
|
-
var _excluded$
|
|
5263
|
+
var _excluded$w = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
5225
5264
|
|
|
5226
|
-
var _templateObject$
|
|
5227
|
-
var propTypes$
|
|
5265
|
+
var _templateObject$p, _templateObject2$j, _templateObject3$8, _templateObject4$6, _templateObject5$4, _templateObject6$4, _templateObject7$3, _templateObject8$3, _templateObject9$2, _templateObject10$2, _templateObject11$1, _templateObject12$1, _templateObject13$1, _templateObject14$1, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
|
|
5266
|
+
var propTypes$v = {
|
|
5228
5267
|
children: PropTypes__default["default"].node.isRequired,
|
|
5229
5268
|
active: PropTypes__default["default"].bool,
|
|
5230
5269
|
disabled: PropTypes__default["default"].bool,
|
|
@@ -5237,25 +5276,25 @@ var propTypes$s = {
|
|
|
5237
5276
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5238
5277
|
activeTextStyle: PropTypes__default["default"].any
|
|
5239
5278
|
};
|
|
5240
|
-
var styles$
|
|
5241
|
-
'.nav-link': css(_templateObject$
|
|
5242
|
-
'.nav-link-text': css(_templateObject2$
|
|
5243
|
-
'.nav-link-disabled': css(_templateObject3$
|
|
5244
|
-
'.nav-link-disabled-text': css(_templateObject4$
|
|
5245
|
-
'.nav-tabs .nav-link': css(_templateObject5$
|
|
5246
|
-
'.nav-tabs .nav-link-disabled': css(_templateObject6$
|
|
5247
|
-
'.nav-tabs .nav-link-disabled-text': css(_templateObject7$
|
|
5248
|
-
'.nav-tabs .nav-link-active': css(_templateObject8$
|
|
5249
|
-
'.nav-tabs .nav-link-active-text': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: $nav-tabs-link-active-color;\n\n &:hover {\n color: $nav-tabs-link-active-color; // added for bootstrap-rn\n }\n &:focus {\n color: $nav-tabs-link-active-color; // added for bootstrap-rn\n }\n "]))),
|
|
5250
|
-
'.nav-pills .nav-link': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background: transparent; // none;\n border: 0;\n border-radius: $nav-pills-border-radius;\n "]))),
|
|
5251
|
-
'.nav-pills .nav-link-active': css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n // @include gradient-bg($nav-pills-link-active-bg);\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n &:hover {\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n }\n &:focus {\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n }\n "]))),
|
|
5252
|
-
'.nav-pills .nav-link-active-text': css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n color: $nav-pills-link-active-color;\n\n &:hover {\n color: $nav-pills-link-active-color; // added for bootstrap-rn\n }\n &:focus {\n color: $nav-pills-link-active-color; // added for bootstyl\n }\n "]))),
|
|
5279
|
+
var styles$p = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
5280
|
+
'.nav-link': css(_templateObject$p || (_templateObject$p = _taggedTemplateLiteral(["\n // display: block;\n flex-direction: row; // added for bootstrap-rn\n align-items: center; // added for bootstrap-rn\n padding: $nav-link-padding-y $nav-link-padding-x;\n // @include transition($nav-link-transition);\n "]))),
|
|
5281
|
+
'.nav-link-text': css(_templateObject2$j || (_templateObject2$j = _taggedTemplateLiteral(["\n font-size: $nav-link-font-size;\n font-weight: $nav-link-font-weight;\n color: $nav-link-color;\n text-decoration: none; // if($link-decoration == none, null, none);\n\n &:hover {\n color: $nav-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n &:focus {\n color: $nav-link-hover-color;\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n "]))),
|
|
5282
|
+
'.nav-link-disabled': css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n @include platform(web) {\n pointer-events: none;\n cursor: default;\n }\n "]))),
|
|
5283
|
+
'.nav-link-disabled-text': css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n color: $nav-link-disabled-color;\n "]))),
|
|
5284
|
+
'.nav-tabs .nav-link': css(_templateObject5$4 || (_templateObject5$4 = _taggedTemplateLiteral(["\n margin-bottom: -$nav-tabs-border-width;\n background: transparent; // none;\n // Use longform for border, so that the border color is applied correctly on Android.\n border-width: $nav-tabs-border-width;\n border-style: solid;\n border-color: transparent transparent;\n border-top-left-radius: $nav-tabs-border-radius;\n border-top-right-radius: $nav-tabs-border-radius;\n\n &:hover {\n // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link\n // isolation: isolate;\n border-color: $nav-tabs-link-hover-border-color;\n }\n &:focus {\n // Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link\n // isolation: isolate;\n border-color: $nav-tabs-link-hover-border-color;\n }\n "]))),
|
|
5285
|
+
'.nav-tabs .nav-link-disabled': css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n background-color: transparent;\n border-color: transparent;\n "]))),
|
|
5286
|
+
'.nav-tabs .nav-link-disabled-text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n color: $nav-link-disabled-color;\n "]))),
|
|
5287
|
+
'.nav-tabs .nav-link-active': css(_templateObject8$3 || (_templateObject8$3 = _taggedTemplateLiteral(["\n background-color: $nav-tabs-link-active-bg;\n border-color: $nav-tabs-link-active-border-color;\n\n &:hover {\n background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n }\n &:focus {\n background-color: $nav-tabs-link-active-bg; // added for bootstrap-rn\n border-color: $nav-tabs-link-active-border-color; // added for bootstrap-rn\n }\n "]))),
|
|
5288
|
+
'.nav-tabs .nav-link-active-text': css(_templateObject9$2 || (_templateObject9$2 = _taggedTemplateLiteral(["\n color: $nav-tabs-link-active-color;\n\n &:hover {\n color: $nav-tabs-link-active-color; // added for bootstrap-rn\n }\n &:focus {\n color: $nav-tabs-link-active-color; // added for bootstrap-rn\n }\n "]))),
|
|
5289
|
+
'.nav-pills .nav-link': css(_templateObject10$2 || (_templateObject10$2 = _taggedTemplateLiteral(["\n background: transparent; // none;\n border: 0;\n border-radius: $nav-pills-border-radius;\n "]))),
|
|
5290
|
+
'.nav-pills .nav-link-active': css(_templateObject11$1 || (_templateObject11$1 = _taggedTemplateLiteral(["\n // @include gradient-bg($nav-pills-link-active-bg);\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n\n &:hover {\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n }\n &:focus {\n background-color: $nav-pills-link-active-bg; // added for bootstrap-rn\n }\n "]))),
|
|
5291
|
+
'.nav-pills .nav-link-active-text': css(_templateObject12$1 || (_templateObject12$1 = _taggedTemplateLiteral(["\n color: $nav-pills-link-active-color;\n\n &:hover {\n color: $nav-pills-link-active-color; // added for bootstrap-rn\n }\n &:focus {\n color: $nav-pills-link-active-color; // added for bootstyl\n }\n "]))),
|
|
5253
5292
|
// Navbar styles
|
|
5254
|
-
'.navbar-nav .nav-link': css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-right: 0;\n padding-left: 0;\n "])))
|
|
5293
|
+
'.navbar-nav .nav-link': css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n padding-right: 0;\n padding-left: 0;\n "])))
|
|
5255
5294
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5256
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .nav-link"), css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n padding-right: $navbar-nav-link-padding-x;\n padding-left: $navbar-nav-link-padding-x;\n }\n "])), next(breakpoint)));
|
|
5295
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav .nav-link"), css(_templateObject14$1 || (_templateObject14$1 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n padding-right: $navbar-nav-link-padding-x;\n padding-left: $navbar-nav-link-padding-x;\n }\n "])), next(breakpoint)));
|
|
5257
5296
|
})), {}, {
|
|
5258
|
-
'.navbar-light .navbar-nav .nav-link-text': css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n\n &:hover {\n color: $navbar-light-hover-color;\n }\n &:focus {\n color: $navbar-light-hover-color;\n }\n "]))),
|
|
5297
|
+
'.navbar-light .navbar-nav .nav-link-text': css(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n\n &:hover {\n color: $navbar-light-hover-color;\n }\n &:focus {\n color: $navbar-light-hover-color;\n }\n "]))),
|
|
5259
5298
|
'.navbar-light .navbar-nav .nav-link-disabled-text': css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: $navbar-light-disabled-color;\n "]))),
|
|
5260
5299
|
'.navbar-light .navbar-nav .nav-link-active-text': css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n color: $navbar-light-active-color;\n\n &:hover {\n color: $navbar-light-active-color; // added for bootstrap-rn\n }\n &:focus {\n color: $navbar-light-active-color; // added for bootstrap-rn\n }\n "]))),
|
|
5261
5300
|
'.navbar-dark .navbar-nav .nav-link-text': css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n\n &:hover {\n color: $navbar-dark-hover-color;\n }\n &:focus {\n color: $navbar-dark-hover-color;\n }\n "]))),
|
|
@@ -5275,19 +5314,19 @@ var NavLink = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
5275
5314
|
activeStyle = modifierProps.activeStyle,
|
|
5276
5315
|
textStyle = modifierProps.textStyle,
|
|
5277
5316
|
activeTextStyle = modifierProps.activeTextStyle,
|
|
5278
|
-
elementProps = _objectWithoutProperties(modifierProps, _excluded$
|
|
5317
|
+
elementProps = _objectWithoutProperties(modifierProps, _excluded$w);
|
|
5279
5318
|
|
|
5280
5319
|
var _useForcedContext = useForcedContext(NavContext),
|
|
5281
5320
|
variant = _useForcedContext.variant;
|
|
5282
5321
|
|
|
5283
5322
|
var navbar = React.useContext(NavbarContext);
|
|
5284
|
-
var classes = getStyles(styles$
|
|
5323
|
+
var classes = getStyles(styles$p, ['.nav-link', disabled && '.nav-link-disabled', variant && ".nav-".concat(variant, " .nav-link"), variant === 'tabs' && disabled && '.nav-tabs .nav-link-disabled', // Navbar styles
|
|
5285
5324
|
navbar && '.navbar-nav .nav-link', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav .nav-link"), navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link"), navbar && disabled && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-disabled")]);
|
|
5286
|
-
var activeClasses = getStyles(styles$
|
|
5325
|
+
var activeClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active"), // Navbar styles
|
|
5287
5326
|
navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active")]);
|
|
5288
|
-
var textClasses = getStyles(styles$
|
|
5327
|
+
var textClasses = getStyles(styles$p, ['.nav-link-text', disabled && '.nav-link-disabled-text', variant && ".nav-".concat(variant, " .nav-link-text"), variant === 'tabs' && disabled && '.nav-tabs .nav-link-disabled-text', // Navbar styles
|
|
5289
5328
|
navbar && '.navbar-nav .nav-link-text', navbar && navbar.expand && ".navbar-expand".concat(infix(navbar.expand), " .navbar-nav .nav-link-text"), navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-text"), navbar && disabled && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-disabled-text")]);
|
|
5290
|
-
var activeTextClasses = getStyles(styles$
|
|
5329
|
+
var activeTextClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active-text"), // Navbar styles
|
|
5291
5330
|
navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active-text")]);
|
|
5292
5331
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
5293
5332
|
ref: modifierRef,
|
|
@@ -5300,27 +5339,27 @@ var NavLink = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
5300
5339
|
}), children);
|
|
5301
5340
|
});
|
|
5302
5341
|
NavLink.displayName = 'NavLink';
|
|
5303
|
-
NavLink.propTypes = propTypes$
|
|
5342
|
+
NavLink.propTypes = propTypes$v;
|
|
5304
5343
|
|
|
5305
5344
|
var TabContext = /*#__PURE__*/React.createContext();
|
|
5306
5345
|
TabContext.displayName = 'TabContext';
|
|
5307
5346
|
|
|
5308
|
-
var _excluded$
|
|
5347
|
+
var _excluded$v = ["children", "variant", "style"];
|
|
5309
5348
|
|
|
5310
|
-
var _templateObject$
|
|
5311
|
-
var propTypes$
|
|
5349
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$7, _templateObject4$5;
|
|
5350
|
+
var propTypes$u = {
|
|
5312
5351
|
children: PropTypes__default["default"].node.isRequired,
|
|
5313
5352
|
variant: PropTypes__default["default"].oneOf(['tabs', 'pills']),
|
|
5314
5353
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5315
5354
|
style: PropTypes__default["default"].any
|
|
5316
5355
|
};
|
|
5317
|
-
var styles$
|
|
5318
|
-
'.nav': css(_templateObject$
|
|
5319
|
-
'.nav-tabs': css(_templateObject2$
|
|
5356
|
+
var styles$o = StyleSheet.create(_objectSpread2({
|
|
5357
|
+
'.nav': css(_templateObject$o || (_templateObject$o = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n flex-wrap: wrap;\n padding-left: 0;\n margin-bottom: 0;\n // list-style: none;\n "]))),
|
|
5358
|
+
'.nav-tabs': css(_templateObject2$i || (_templateObject2$i = _taggedTemplateLiteral(["\n border-bottom-width: $nav-tabs-border-width;\n border-style: solid;\n border-color: $nav-tabs-border-color;\n "]))),
|
|
5320
5359
|
// Navbar styles
|
|
5321
|
-
'.navbar-nav': css(_templateObject3$
|
|
5360
|
+
'.navbar-nav': css(_templateObject3$7 || (_templateObject3$7 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column; // cannot use \"inherit\" to get the \".navbar\"s value\n padding-left: 0;\n margin-bottom: 0;\n // list-style: none;\n "])))
|
|
5322
5361
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5323
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav"), css(_templateObject4$
|
|
5362
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav"), css(_templateObject4$5 || (_templateObject4$5 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex-direction: row;\n }\n "])), next(breakpoint)));
|
|
5324
5363
|
})));
|
|
5325
5364
|
|
|
5326
5365
|
var getRole = function getRole(tabbable, navbar) {
|
|
@@ -5339,11 +5378,11 @@ var Nav = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref
|
|
|
5339
5378
|
var children = props.children,
|
|
5340
5379
|
variant = props.variant,
|
|
5341
5380
|
style = props.style,
|
|
5342
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5381
|
+
elementProps = _objectWithoutProperties(props, _excluded$v);
|
|
5343
5382
|
|
|
5344
5383
|
var navbar = React.useContext(NavbarContext);
|
|
5345
5384
|
var tabbable = React.useContext(TabContext);
|
|
5346
|
-
var classes = getStyles(styles$
|
|
5385
|
+
var classes = getStyles(styles$o, [!navbar && '.nav', variant === 'tabs' && '.nav-tabs', // Navbar styles
|
|
5347
5386
|
navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
|
|
5348
5387
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5349
5388
|
ref: ref,
|
|
@@ -5356,7 +5395,7 @@ var Nav = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref
|
|
|
5356
5395
|
}, children));
|
|
5357
5396
|
});
|
|
5358
5397
|
Nav.displayName = 'Nav';
|
|
5359
|
-
Nav.propTypes = propTypes$
|
|
5398
|
+
Nav.propTypes = propTypes$u;
|
|
5360
5399
|
Nav.Context = NavContext;
|
|
5361
5400
|
Nav.Link = NavLink;
|
|
5362
5401
|
|
|
@@ -5377,7 +5416,7 @@ function useTabbable(defaultActiveTarget, controlledActiveTarget, onChange) {
|
|
|
5377
5416
|
}, [activeTarget]);
|
|
5378
5417
|
}
|
|
5379
5418
|
|
|
5380
|
-
var propTypes$
|
|
5419
|
+
var propTypes$t = {
|
|
5381
5420
|
children: PropTypes__default["default"].node.isRequired,
|
|
5382
5421
|
defaultActiveTarget: PropTypes__default["default"].string.isRequired,
|
|
5383
5422
|
activeTarget: PropTypes__default["default"].string,
|
|
@@ -5396,9 +5435,9 @@ var TabProvider = function TabProvider(props) {
|
|
|
5396
5435
|
};
|
|
5397
5436
|
|
|
5398
5437
|
TabProvider.displayName = 'TabProvider';
|
|
5399
|
-
TabProvider.propTypes = propTypes$
|
|
5438
|
+
TabProvider.propTypes = propTypes$t;
|
|
5400
5439
|
|
|
5401
|
-
var propTypes$
|
|
5440
|
+
var propTypes$s = {
|
|
5402
5441
|
children: PropTypes__default["default"].node.isRequired
|
|
5403
5442
|
};
|
|
5404
5443
|
var TabContent = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
@@ -5409,28 +5448,28 @@ var TabContent = /*#__PURE__*/React__default["default"].forwardRef(function (pro
|
|
|
5409
5448
|
}));
|
|
5410
5449
|
});
|
|
5411
5450
|
TabContent.displayName = 'TabContent';
|
|
5412
|
-
TabContent.propTypes = propTypes$
|
|
5451
|
+
TabContent.propTypes = propTypes$s;
|
|
5413
5452
|
|
|
5414
|
-
var _excluded$
|
|
5453
|
+
var _excluded$u = ["id", "style"];
|
|
5415
5454
|
|
|
5416
|
-
var _templateObject$
|
|
5417
|
-
var propTypes$
|
|
5455
|
+
var _templateObject$n, _templateObject2$h;
|
|
5456
|
+
var propTypes$r = {
|
|
5418
5457
|
children: PropTypes__default["default"].node.isRequired,
|
|
5419
5458
|
id: PropTypes__default["default"].string.isRequired,
|
|
5420
5459
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5421
5460
|
style: PropTypes__default["default"].any
|
|
5422
5461
|
};
|
|
5423
|
-
var styles$
|
|
5424
|
-
'.tab-pane': css(_templateObject$
|
|
5425
|
-
'.active': css(_templateObject2$
|
|
5462
|
+
var styles$n = StyleSheet.create({
|
|
5463
|
+
'.tab-pane': css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: none;\n "]))),
|
|
5464
|
+
'.active': css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n display: flex;\n "])))
|
|
5426
5465
|
});
|
|
5427
5466
|
var TabPane = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5428
5467
|
var target = props.id,
|
|
5429
5468
|
style = props.style,
|
|
5430
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5469
|
+
elementProps = _objectWithoutProperties(props, _excluded$u);
|
|
5431
5470
|
|
|
5432
5471
|
var tabbable = useForcedContext(TabContext);
|
|
5433
|
-
var classes = getStyles(styles$
|
|
5472
|
+
var classes = getStyles(styles$n, ['.tab-pane', tabbable.activeTarget === target && '.active']);
|
|
5434
5473
|
var id = getElementId(tabbable.identifier, target); // Accessiblity role tabpanel is only supported on web.
|
|
5435
5474
|
|
|
5436
5475
|
var role = reactNative.Platform.OS === 'web' ? 'tabpanel' : null;
|
|
@@ -5443,15 +5482,15 @@ var TabPane = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
5443
5482
|
}));
|
|
5444
5483
|
});
|
|
5445
5484
|
TabPane.displayName = 'TabPane';
|
|
5446
|
-
TabPane.propTypes = propTypes$
|
|
5485
|
+
TabPane.propTypes = propTypes$r;
|
|
5447
5486
|
|
|
5448
|
-
var _excluded$
|
|
5487
|
+
var _excluded$t = ["target", "onPress"];
|
|
5449
5488
|
function useToggleTab(props) {
|
|
5450
5489
|
var context = useForcedContext(TabContext);
|
|
5451
5490
|
|
|
5452
5491
|
var target = props.target,
|
|
5453
5492
|
handlePress = props.onPress,
|
|
5454
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5493
|
+
restProps = _objectWithoutProperties(props, _excluded$t);
|
|
5455
5494
|
|
|
5456
5495
|
invariant__default["default"](target, 'Prop "target" is required.');
|
|
5457
5496
|
var id = getElementId(context.identifier, target);
|
|
@@ -5477,63 +5516,63 @@ Tab.Content = TabContent;
|
|
|
5477
5516
|
Tab.Pane = TabPane;
|
|
5478
5517
|
Tab.useToggle = useToggleTab;
|
|
5479
5518
|
|
|
5480
|
-
var _excluded$
|
|
5519
|
+
var _excluded$s = ["children", "style"];
|
|
5481
5520
|
|
|
5482
|
-
var _templateObject$
|
|
5483
|
-
var propTypes$
|
|
5521
|
+
var _templateObject$m, _templateObject2$g, _templateObject3$6;
|
|
5522
|
+
var propTypes$q = {
|
|
5484
5523
|
children: PropTypes__default["default"].node.isRequired,
|
|
5485
5524
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5486
5525
|
style: PropTypes__default["default"].any
|
|
5487
5526
|
};
|
|
5488
|
-
var styles$
|
|
5489
|
-
'.navbar-text': css(_templateObject$
|
|
5490
|
-
'.navbar-light .navbar-text': css(_templateObject2$
|
|
5491
|
-
'.navbar-dark .navbar-text': css(_templateObject3$
|
|
5527
|
+
var styles$m = StyleSheet.create({
|
|
5528
|
+
'.navbar-text': css(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n padding-top: $nav-link-padding-y;\n padding-bottom: $nav-link-padding-y;\n "]))),
|
|
5529
|
+
'.navbar-light .navbar-text': css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5530
|
+
'.navbar-dark .navbar-text': css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5492
5531
|
});
|
|
5493
5532
|
var NavbarText = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5494
5533
|
var children = props.children,
|
|
5495
5534
|
style = props.style,
|
|
5496
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5535
|
+
elementProps = _objectWithoutProperties(props, _excluded$s);
|
|
5497
5536
|
|
|
5498
5537
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5499
5538
|
variant = _useForcedContext.variant;
|
|
5500
5539
|
|
|
5501
|
-
var classes = getStyles(styles$
|
|
5540
|
+
var classes = getStyles(styles$m, ['.navbar-text', ".navbar-".concat(variant, " .navbar-text")]);
|
|
5502
5541
|
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
5503
5542
|
ref: ref,
|
|
5504
5543
|
style: [classes, style]
|
|
5505
5544
|
}), children);
|
|
5506
5545
|
});
|
|
5507
5546
|
NavbarText.displayName = 'NavbarText';
|
|
5508
|
-
NavbarText.propTypes = propTypes$
|
|
5547
|
+
NavbarText.propTypes = propTypes$q;
|
|
5509
5548
|
|
|
5510
|
-
var _excluded$
|
|
5549
|
+
var _excluded$r = ["children", "style", "textStyle"];
|
|
5511
5550
|
|
|
5512
|
-
var _templateObject$
|
|
5513
|
-
var propTypes$
|
|
5551
|
+
var _templateObject$l, _templateObject2$f, _templateObject3$5, _templateObject4$4;
|
|
5552
|
+
var propTypes$p = {
|
|
5514
5553
|
children: PropTypes__default["default"].node.isRequired,
|
|
5515
5554
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5516
5555
|
style: PropTypes__default["default"].any,
|
|
5517
5556
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5518
5557
|
textStyle: PropTypes__default["default"].any
|
|
5519
5558
|
};
|
|
5520
|
-
var styles$
|
|
5521
|
-
'.navbar-brand': css(_templateObject$
|
|
5522
|
-
'.navbar-brand-text': css(_templateObject2$
|
|
5523
|
-
'.navbar-light .navbar-brand-text': css(_templateObject3$
|
|
5524
|
-
'.navbar-dark .navbar-brand-text': css(_templateObject4$
|
|
5559
|
+
var styles$l = StyleSheet.create({
|
|
5560
|
+
'.navbar-brand': css(_templateObject$l || (_templateObject$l = _taggedTemplateLiteral(["\n padding-top: $navbar-brand-padding-y;\n padding-bottom: $navbar-brand-padding-y;\n margin-right: $navbar-brand-margin-end;\n "]))),
|
|
5561
|
+
'.navbar-brand-text': css(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n font-size: $navbar-brand-font-size;\n line-height: $navbar-brand-font-size * $line-height-base; // added for bootstrap-rn\n text-decoration: none; // if($link-decoration == none, null, none);\n // white-space: nowrap;\n\n &:hover {\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n &:focus {\n text-decoration: none; // if($link-hover-decoration == underline, none, null);\n }\n "]))),
|
|
5562
|
+
'.navbar-light .navbar-brand-text': css(_templateObject3$5 || (_templateObject3$5 = _taggedTemplateLiteral(["\n color: $navbar-light-brand-color;\n\n &:hover {\n color: $navbar-light-brand-hover-color;\n }\n &:focus {\n color: $navbar-light-brand-hover-color;\n }\n "]))),
|
|
5563
|
+
'.navbar-dark .navbar-brand-text': css(_templateObject4$4 || (_templateObject4$4 = _taggedTemplateLiteral(["\n color: $navbar-dark-brand-color;\n\n &:hover {\n color: $navbar-dark-brand-hover-color;\n }\n &:focus {\n color: $navbar-dark-brand-hover-color;\n }\n "])))
|
|
5525
5564
|
});
|
|
5526
5565
|
var NavbarBrand = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5527
5566
|
var children = props.children,
|
|
5528
5567
|
style = props.style,
|
|
5529
5568
|
textStyle = props.textStyle,
|
|
5530
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5569
|
+
elementProps = _objectWithoutProperties(props, _excluded$r);
|
|
5531
5570
|
|
|
5532
5571
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5533
5572
|
variant = _useForcedContext.variant;
|
|
5534
5573
|
|
|
5535
|
-
var classes = getStyles(styles$
|
|
5536
|
-
var textClasses = getStyles(styles$
|
|
5574
|
+
var classes = getStyles(styles$l, ['.navbar-brand']);
|
|
5575
|
+
var textClasses = getStyles(styles$l, ['.navbar-brand-text', ".navbar-".concat(variant, " .navbar-brand-text")]);
|
|
5537
5576
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
5538
5577
|
ref: ref,
|
|
5539
5578
|
style: [classes, style],
|
|
@@ -5541,32 +5580,32 @@ var NavbarBrand = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
5541
5580
|
}), children);
|
|
5542
5581
|
});
|
|
5543
5582
|
NavbarBrand.displayName = 'NavbarBrand';
|
|
5544
|
-
NavbarBrand.propTypes = propTypes$
|
|
5583
|
+
NavbarBrand.propTypes = propTypes$p;
|
|
5545
5584
|
|
|
5546
|
-
var _excluded$
|
|
5585
|
+
var _excluded$q = ["children", "style"];
|
|
5547
5586
|
|
|
5548
|
-
var _templateObject$
|
|
5549
|
-
var propTypes$
|
|
5587
|
+
var _templateObject$k, _templateObject2$e;
|
|
5588
|
+
var propTypes$o = {
|
|
5550
5589
|
children: PropTypes__default["default"].node.isRequired,
|
|
5551
5590
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5552
5591
|
style: PropTypes__default["default"].any
|
|
5553
5592
|
};
|
|
5554
|
-
var styles$
|
|
5555
|
-
'.navbar-collapse': css(_templateObject$
|
|
5593
|
+
var styles$k = StyleSheet.create(_objectSpread2({
|
|
5594
|
+
'.navbar-collapse': css(_templateObject$k || (_templateObject$k = _taggedTemplateLiteral(["\n flex-basis: 100%;\n flex-grow: 1;\n // For always expanded or extra full navbars, ensure content aligns itself\n // properly vertically. Can be easily overridden with flex utilities.\n // align-items: center;\n "])))
|
|
5556
5595
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5557
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-collapse"), css(_templateObject2$
|
|
5596
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-collapse"), css(_templateObject2$e || (_templateObject2$e = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex-direction: row; // added for bootstrap-rn\n display: flex;\n flex-basis: auto;\n }\n "])), next(breakpoint)));
|
|
5558
5597
|
})));
|
|
5559
5598
|
var NavbarCollapse = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5560
5599
|
var children = props.children,
|
|
5561
5600
|
style = props.style,
|
|
5562
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5601
|
+
elementProps = _objectWithoutProperties(props, _excluded$q);
|
|
5563
5602
|
|
|
5564
5603
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5565
5604
|
expand = _useForcedContext.expand,
|
|
5566
5605
|
expanded = _useForcedContext.expanded;
|
|
5567
5606
|
|
|
5568
5607
|
var media = useMedia();
|
|
5569
|
-
var classes = getStyles(styles$
|
|
5608
|
+
var classes = getStyles(styles$k, ['.navbar-collapse', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-collapse")]);
|
|
5570
5609
|
var show = expanded || expand && (expand === true || media.up(expand));
|
|
5571
5610
|
|
|
5572
5611
|
if (!show) {
|
|
@@ -5579,14 +5618,14 @@ var NavbarCollapse = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
5579
5618
|
}), children);
|
|
5580
5619
|
});
|
|
5581
5620
|
NavbarCollapse.displayName = 'NavbarCollapse';
|
|
5582
|
-
NavbarCollapse.propTypes = propTypes$
|
|
5621
|
+
NavbarCollapse.propTypes = propTypes$o;
|
|
5583
5622
|
|
|
5584
|
-
var _excluded$
|
|
5623
|
+
var _excluded$p = ["onPress"];
|
|
5585
5624
|
function useToggleNavbar(props) {
|
|
5586
5625
|
var context = useForcedContext(NavbarContext);
|
|
5587
5626
|
|
|
5588
5627
|
var handlePress = props.onPress,
|
|
5589
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5628
|
+
restProps = _objectWithoutProperties(props, _excluded$p);
|
|
5590
5629
|
|
|
5591
5630
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
5592
5631
|
nativeID: context.identifier,
|
|
@@ -5602,10 +5641,10 @@ function useToggleNavbar(props) {
|
|
|
5602
5641
|
});
|
|
5603
5642
|
}
|
|
5604
5643
|
|
|
5605
|
-
var _excluded$
|
|
5644
|
+
var _excluded$o = ["style", "textStyle", "iconStyle"];
|
|
5606
5645
|
|
|
5607
|
-
var _templateObject$
|
|
5608
|
-
var propTypes$
|
|
5646
|
+
var _templateObject$j, _templateObject2$d, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2;
|
|
5647
|
+
var propTypes$n = {
|
|
5609
5648
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5610
5649
|
style: PropTypes__default["default"].any,
|
|
5611
5650
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -5613,31 +5652,31 @@ var propTypes$k = {
|
|
|
5613
5652
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5614
5653
|
iconStyle: PropTypes__default["default"].any
|
|
5615
5654
|
};
|
|
5616
|
-
var styles$
|
|
5617
|
-
'.navbar-toggler': css(_templateObject$
|
|
5618
|
-
'.navbar-toggler-text': css(_templateObject2$
|
|
5619
|
-
'.navbar-toggler-icon': css(_templateObject3$
|
|
5655
|
+
var styles$j = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
5656
|
+
'.navbar-toggler': css(_templateObject$j || (_templateObject$j = _taggedTemplateLiteral(["\n padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;\n background-color: transparent; // remove default button style\n border: $border-width solid transparent; // remove default button style\n border-radius: $navbar-toggler-border-radius;\n // @include transition($navbar-toggler-transition);\n\n &:focus {\n @include platform(web) {\n outline-width: 0; // outline: 0;\n }\n // box-shadow: 0 0 0 $navbar-toggler-focus-width;\n }\n "]))),
|
|
5657
|
+
'.navbar-toggler-text': css(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteral(["\n font-size: $navbar-toggler-font-size;\n line-height: $navbar-toggler-font-size * $line-height-base;\n\n &:hover {\n text-decoration: none;\n }\n\n &:focus {\n text-decoration: none;\n }\n "]))),
|
|
5658
|
+
'.navbar-toggler-icon': css(_templateObject3$4 || (_templateObject3$4 = _taggedTemplateLiteral(["\n // display: inline-block;\n width: $navbar-toggler-font-size * 1.5; // 1.5em;\n height: $navbar-toggler-font-size * 1.5; // 1.5em;\n // vertical-align: middle;\n // background-repeat: no-repeat;\n // background-position: center;\n // background-size: 100%;\n "])))
|
|
5620
5659
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5621
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-toggler"), css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n display: none;\n }\n "])), next(breakpoint)));
|
|
5660
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-toggler"), css(_templateObject4$3 || (_templateObject4$3 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n display: none;\n }\n "])), next(breakpoint)));
|
|
5622
5661
|
})), {}, {
|
|
5623
|
-
'.navbar-light .navbar-toggler': css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-color: $navbar-light-toggler-border-color;\n "]))),
|
|
5624
|
-
'.navbar-light .navbar-toggler-text': css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5625
|
-
'.navbar-dark .navbar-toggler': css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-color: $navbar-dark-toggler-border-color;\n "]))),
|
|
5626
|
-
'.navbar-dark .navbar-toggler-text': css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5662
|
+
'.navbar-light .navbar-toggler': css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n border-color: $navbar-light-toggler-border-color;\n "]))),
|
|
5663
|
+
'.navbar-light .navbar-toggler-text': css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5664
|
+
'.navbar-dark .navbar-toggler': css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n border-color: $navbar-dark-toggler-border-color;\n "]))),
|
|
5665
|
+
'.navbar-dark .navbar-toggler-text': css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5627
5666
|
}));
|
|
5628
5667
|
var NavbarToggler = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5629
5668
|
var style = props.style,
|
|
5630
5669
|
textStyle = props.textStyle,
|
|
5631
5670
|
iconStyle = props.iconStyle,
|
|
5632
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5671
|
+
elementProps = _objectWithoutProperties(props, _excluded$o);
|
|
5633
5672
|
|
|
5634
5673
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5635
5674
|
variant = _useForcedContext.variant,
|
|
5636
5675
|
expand = _useForcedContext.expand;
|
|
5637
5676
|
|
|
5638
|
-
var classes = getStyles(styles$
|
|
5639
|
-
var textClasses = getStyles(styles$
|
|
5640
|
-
var iconClasses = getStyles(styles$
|
|
5677
|
+
var classes = getStyles(styles$j, ['.navbar-toggler', ".navbar-".concat(variant, " .navbar-toggler"), expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-toggler")]);
|
|
5678
|
+
var textClasses = getStyles(styles$j, ['.navbar-toggler-text', ".navbar-".concat(variant, " .navbar-toggler-text")]);
|
|
5679
|
+
var iconClasses = getStyles(styles$j, ['.navbar-toggler-icon']);
|
|
5641
5680
|
return /*#__PURE__*/React__default["default"].createElement(Pressable, _extends({}, elementProps, {
|
|
5642
5681
|
ref: ref,
|
|
5643
5682
|
toggle: useToggleNavbar,
|
|
@@ -5648,7 +5687,7 @@ var NavbarToggler = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
5648
5687
|
}, StyleSheet.value("navbar-".concat(variant, "-toggler-icon-bg"))));
|
|
5649
5688
|
});
|
|
5650
5689
|
NavbarToggler.displayName = 'NavbarToggler';
|
|
5651
|
-
NavbarToggler.propTypes = propTypes$
|
|
5690
|
+
NavbarToggler.propTypes = propTypes$n;
|
|
5652
5691
|
|
|
5653
5692
|
function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expand) {
|
|
5654
5693
|
var identifier = useIdentifier('navbar');
|
|
@@ -5669,12 +5708,12 @@ function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expan
|
|
|
5669
5708
|
}, [variant, expanded]);
|
|
5670
5709
|
}
|
|
5671
5710
|
|
|
5672
|
-
var _excluded$
|
|
5711
|
+
var _excluded$n = ["onPress"];
|
|
5673
5712
|
function useDismissNavbar(props) {
|
|
5674
5713
|
var context = useForcedContext(NavbarContext);
|
|
5675
5714
|
|
|
5676
5715
|
var handlePress = props.onPress,
|
|
5677
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5716
|
+
restProps = _objectWithoutProperties(props, _excluded$n);
|
|
5678
5717
|
|
|
5679
5718
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
5680
5719
|
onPress: function onPress(event) {
|
|
@@ -5685,10 +5724,10 @@ function useDismissNavbar(props) {
|
|
|
5685
5724
|
});
|
|
5686
5725
|
}
|
|
5687
5726
|
|
|
5688
|
-
var _excluded$
|
|
5727
|
+
var _excluded$m = ["children", "variant", "defaultExpanded", "expanded", "onToggle", "expand", "style"];
|
|
5689
5728
|
|
|
5690
|
-
var _templateObject$
|
|
5691
|
-
var propTypes$
|
|
5729
|
+
var _templateObject$i, _templateObject2$c;
|
|
5730
|
+
var propTypes$m = {
|
|
5692
5731
|
children: PropTypes__default["default"].node.isRequired,
|
|
5693
5732
|
variant: PropTypes__default["default"].oneOf(['light', 'dark']),
|
|
5694
5733
|
defaultExpanded: PropTypes__default["default"].bool,
|
|
@@ -5698,10 +5737,10 @@ var propTypes$j = {
|
|
|
5698
5737
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5699
5738
|
style: PropTypes__default["default"].any
|
|
5700
5739
|
};
|
|
5701
|
-
var styles$
|
|
5702
|
-
'.navbar': css(_templateObject$
|
|
5740
|
+
var styles$i = StyleSheet.create(_objectSpread2({
|
|
5741
|
+
'.navbar': css(_templateObject$i || (_templateObject$i = _taggedTemplateLiteral(["\n position: relative;\n display: flex;\n flex-wrap: wrap; // allow us to do the line break for collapsing content\n align-items: center;\n justify-content: space-between; // space out brand from logo\n padding-top: $navbar-padding-y;\n padding-right: $navbar-padding-x; // default: null\n padding-bottom: $navbar-padding-y;\n padding-left: $navbar-padding-x; // default: null\n // @include gradient-bg();\n "])))
|
|
5703
5742
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5704
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint))), css(_templateObject2$
|
|
5743
|
+
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint))), css(_templateObject2$c || (_templateObject2$c = _taggedTemplateLiteral(["\n @include media-breakpoint-up(", ") {\n flex-wrap: nowrap;\n justify-content: flex-start;\n }\n "])), next(breakpoint)));
|
|
5705
5744
|
})));
|
|
5706
5745
|
var Navbar = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5707
5746
|
var children = props.children,
|
|
@@ -5713,10 +5752,10 @@ var Navbar = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
5713
5752
|
onToggle = props.onToggle,
|
|
5714
5753
|
expand = props.expand,
|
|
5715
5754
|
style = props.style,
|
|
5716
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5755
|
+
elementProps = _objectWithoutProperties(props, _excluded$m);
|
|
5717
5756
|
|
|
5718
5757
|
var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
|
|
5719
|
-
var classes = getStyles(styles$
|
|
5758
|
+
var classes = getStyles(styles$i, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
|
|
5720
5759
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5721
5760
|
ref: ref,
|
|
5722
5761
|
style: [classes, style]
|
|
@@ -5725,7 +5764,7 @@ var Navbar = /*#__PURE__*/React__default["default"].forwardRef(function (props,
|
|
|
5725
5764
|
}, children));
|
|
5726
5765
|
});
|
|
5727
5766
|
Navbar.displayName = 'Navbar';
|
|
5728
|
-
Navbar.propTypes = propTypes$
|
|
5767
|
+
Navbar.propTypes = propTypes$m;
|
|
5729
5768
|
Navbar.Brand = NavbarBrand;
|
|
5730
5769
|
Navbar.Text = NavbarText;
|
|
5731
5770
|
Navbar.Collapse = NavbarCollapse;
|
|
@@ -5733,23 +5772,202 @@ Navbar.Toggler = NavbarToggler;
|
|
|
5733
5772
|
Navbar.useDismiss = useDismissNavbar;
|
|
5734
5773
|
Navbar.useToggle = useToggleNavbar;
|
|
5735
5774
|
|
|
5736
|
-
var
|
|
5775
|
+
var PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
5776
|
+
var TRIGGERS = ['click', 'hover', 'focus', 'manual', 'click hover', 'hover click', 'hover focus', 'focus hover', 'click focus', 'focus click'];
|
|
5777
|
+
var TriggerPropTypes = {
|
|
5778
|
+
trigger: PropTypes__default["default"].oneOf(TRIGGERS),
|
|
5779
|
+
placement: PropTypes__default["default"].oneOf(PLACEMENTS),
|
|
5780
|
+
offset: PropTypes__default["default"].number,
|
|
5781
|
+
defaultVisible: PropTypes__default["default"].bool,
|
|
5782
|
+
visible: PropTypes__default["default"].bool,
|
|
5783
|
+
onToggle: PropTypes__default["default"].func
|
|
5784
|
+
};
|
|
5785
|
+
function useTrigger(rawTrigger, props, elementProps, ref) {
|
|
5786
|
+
var _props$defaultVisible = props.defaultVisible,
|
|
5787
|
+
defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
|
|
5788
|
+
controlledVisible = props.visible,
|
|
5789
|
+
onToggle = props.onToggle;
|
|
5790
|
+
var _onPress = elementProps.onPress,
|
|
5791
|
+
_onFocus = elementProps.onFocus,
|
|
5792
|
+
_onBlur = elementProps.onBlur,
|
|
5793
|
+
_onMouseOver = elementProps.onMouseOver,
|
|
5794
|
+
_onMouseLeave = elementProps.onMouseLeave;
|
|
5795
|
+
var trigger = rawTrigger.split(' ');
|
|
5796
|
+
var identifier = useIdentifier('overlay');
|
|
5737
5797
|
|
|
5738
|
-
var
|
|
5739
|
-
|
|
5798
|
+
var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
|
|
5799
|
+
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
5800
|
+
visible = _useControlledState2[0],
|
|
5801
|
+
setVisible = _useControlledState2[1];
|
|
5802
|
+
|
|
5803
|
+
var _useState = React.useState(false),
|
|
5804
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
5805
|
+
focused = _useState2[0],
|
|
5806
|
+
setFocused = _useState2[1];
|
|
5807
|
+
|
|
5808
|
+
var _useState3 = React.useState(false),
|
|
5809
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
5810
|
+
hovered = _useState4[0],
|
|
5811
|
+
setHovered = _useState4[1];
|
|
5812
|
+
|
|
5813
|
+
var targetRef = React.useRef();
|
|
5814
|
+
return {
|
|
5815
|
+
visible: visible,
|
|
5816
|
+
setVisible: setVisible,
|
|
5817
|
+
targetProps: _objectSpread2(_objectSpread2({
|
|
5818
|
+
ref: concatRefs(targetRef, ref)
|
|
5819
|
+
}, optional(visible, {
|
|
5820
|
+
accessibilityDescribedBy: identifier
|
|
5821
|
+
})), {}, {
|
|
5822
|
+
onPress: function onPress(event) {
|
|
5823
|
+
if (trigger.includes('click')) {
|
|
5824
|
+
setVisible(function (value) {
|
|
5825
|
+
return !value;
|
|
5826
|
+
});
|
|
5827
|
+
}
|
|
5828
|
+
|
|
5829
|
+
if (_onPress) {
|
|
5830
|
+
_onPress(event);
|
|
5831
|
+
}
|
|
5832
|
+
},
|
|
5833
|
+
onFocus: function onFocus(event) {
|
|
5834
|
+
if (trigger.includes('focus')) {
|
|
5835
|
+
setFocused(true);
|
|
5836
|
+
|
|
5837
|
+
if (!visible) {
|
|
5838
|
+
setVisible(true);
|
|
5839
|
+
}
|
|
5840
|
+
}
|
|
5841
|
+
|
|
5842
|
+
if (_onFocus) {
|
|
5843
|
+
_onFocus(event);
|
|
5844
|
+
}
|
|
5845
|
+
},
|
|
5846
|
+
onBlur: function onBlur(event) {
|
|
5847
|
+
if (trigger.includes('focus')) {
|
|
5848
|
+
setFocused(false);
|
|
5849
|
+
var activeHoverTrigger = trigger.includes('hover') && hovered;
|
|
5850
|
+
|
|
5851
|
+
if (visible && !activeHoverTrigger) {
|
|
5852
|
+
setVisible(false);
|
|
5853
|
+
}
|
|
5854
|
+
}
|
|
5855
|
+
|
|
5856
|
+
if (_onBlur) {
|
|
5857
|
+
_onBlur(event);
|
|
5858
|
+
}
|
|
5859
|
+
},
|
|
5860
|
+
onMouseOver: function onMouseOver(event) {
|
|
5861
|
+
if (trigger.includes('hover')) {
|
|
5862
|
+
setHovered(true);
|
|
5863
|
+
|
|
5864
|
+
if (!visible && !focused) {
|
|
5865
|
+
setVisible(true);
|
|
5866
|
+
}
|
|
5867
|
+
}
|
|
5868
|
+
|
|
5869
|
+
if (_onMouseOver) {
|
|
5870
|
+
_onMouseOver(event);
|
|
5871
|
+
}
|
|
5872
|
+
},
|
|
5873
|
+
onMouseLeave: function onMouseLeave(event) {
|
|
5874
|
+
if (trigger.includes('hover')) {
|
|
5875
|
+
setHovered(false);
|
|
5876
|
+
var activeFocusTrigger = trigger.includes('focus') && focused;
|
|
5877
|
+
|
|
5878
|
+
if (visible && !activeFocusTrigger) {
|
|
5879
|
+
setVisible(false);
|
|
5880
|
+
}
|
|
5881
|
+
}
|
|
5882
|
+
|
|
5883
|
+
if (_onMouseLeave) {
|
|
5884
|
+
_onMouseLeave(event);
|
|
5885
|
+
}
|
|
5886
|
+
}
|
|
5887
|
+
}),
|
|
5888
|
+
targetRef: targetRef,
|
|
5889
|
+
templateProps: {
|
|
5890
|
+
nativeID: identifier
|
|
5891
|
+
}
|
|
5892
|
+
};
|
|
5893
|
+
}
|
|
5894
|
+
|
|
5895
|
+
var PopoverContext = /*#__PURE__*/React__default["default"].createContext();
|
|
5896
|
+
PopoverContext.displayName = 'PopoverContext';
|
|
5897
|
+
|
|
5898
|
+
var _excluded$l = ["style"];
|
|
5899
|
+
|
|
5900
|
+
var _templateObject$h, _templateObject2$b, _templateObject3$3, _templateObject4$2, _templateObject5$2, _templateObject6$2, _templateObject7$1, _templateObject8$1, _templateObject9$1, _templateObject10$1, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
|
|
5901
|
+
var propTypes$l = {
|
|
5902
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
5903
|
+
style: PropTypes__default["default"].any
|
|
5904
|
+
};
|
|
5905
|
+
var styles$h = StyleSheet.create({
|
|
5906
|
+
'.popover-arrow': css(_templateObject$h || (_templateObject$h = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n width: $popover-arrow-width;\n height: $popover-arrow-height;\n "]))),
|
|
5907
|
+
'.popover-arrow::before': css(_templateObject2$b || (_templateObject2$b = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
|
|
5908
|
+
'.popover-arrow::after': css(_templateObject3$3 || (_templateObject3$3 = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
|
|
5909
|
+
'.bs-popover-top .popover-arrow': css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n bottom: ", ";\n "])), function (t) {
|
|
5910
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5911
|
+
}),
|
|
5912
|
+
'.bs-popover-top .popover-arrow::before': css(_templateObject5$2 || (_templateObject5$2 = _taggedTemplateLiteral(["\n bottom: 0;\n border-top-width: $popover-arrow-height;\n border-right-width: $popover-arrow-width * 0.5;\n border-left-width: $popover-arrow-width * 0.5;\n border-bottom-width: 0;\n border-top-color: $popover-arrow-outer-color;\n "]))),
|
|
5913
|
+
'.bs-popover-top .popover-arrow::after': css(_templateObject6$2 || (_templateObject6$2 = _taggedTemplateLiteral(["\n bottom: $popover-border-width;\n border-top-width: $popover-arrow-height;\n border-right-width: $popover-arrow-width * 0.5;\n border-left-width: $popover-arrow-width * 0.5;\n border-bottom-width: 0;\n border-top-color: $popover-arrow-color;\n "]))),
|
|
5914
|
+
'.bs-popover-end .popover-arrow': css(_templateObject7$1 || (_templateObject7$1 = _taggedTemplateLiteral(["\n left: ", ";\n width: $popover-arrow-height;\n height: $popover-arrow-width;\n "])), function (t) {
|
|
5915
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5916
|
+
}),
|
|
5917
|
+
'.bs-popover-end .popover-arrow::before': css(_templateObject8$1 || (_templateObject8$1 = _taggedTemplateLiteral(["\n left: 0;\n border-top-width: $popover-arrow-width * 0.5;\n border-right-width: $popover-arrow-height;\n border-left-width: 0;\n border-bottom-width: $popover-arrow-width * 0.5;\n border-right-color: $popover-arrow-outer-color;\n "]))),
|
|
5918
|
+
'.bs-popover-end .popover-arrow::after': css(_templateObject9$1 || (_templateObject9$1 = _taggedTemplateLiteral(["\n left: $popover-border-width;\n border-top-width: $popover-arrow-width * 0.5;\n border-right-width: $popover-arrow-height;\n border-left-width: 0;\n border-bottom-width: $popover-arrow-width * 0.5;\n border-right-color: $popover-arrow-color;\n "]))),
|
|
5919
|
+
'.bs-popover-bottom .popover-arrow': css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n top: ", ";\n "])), function (t) {
|
|
5920
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5921
|
+
}),
|
|
5922
|
+
'.bs-popover-bottom .popover-arrow::before': css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n top: 0;\n border-top-width: 0;\n border-right-width: $popover-arrow-width * 0.5;\n border-left-width: $popover-arrow-width * 0.5;\n border-bottom-width: $popover-arrow-height;\n border-bottom-color: $popover-arrow-outer-color;\n "]))),
|
|
5923
|
+
'.bs-popover-bottom .popover-arrow::after': css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n top: $popover-border-width;\n border-top-width: 0;\n border-right-width: $popover-arrow-width * 0.5;\n border-left-width: $popover-arrow-width * 0.5;\n border-bottom-width: $popover-arrow-height;\n border-bottom-color: $popover-arrow-color;\n "]))),
|
|
5924
|
+
'.bs-popover-start .popover-arrow': css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n right: ", ";\n width: $popover-arrow-height;\n height: $popover-arrow-width;\n "])), function (t) {
|
|
5925
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5926
|
+
}),
|
|
5927
|
+
'.bs-popover-start .popover-arrow::before': css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n right: 0;\n border-top-width: $popover-arrow-width * 0.5;\n border-right-width: 0;\n border-left-width: $popover-arrow-height;\n border-bottom-width: $popover-arrow-width * 0.5;\n border-left-color: $popover-arrow-outer-color;\n "]))),
|
|
5928
|
+
'.bs-popover-start .popover-arrow::after': css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n right: $popover-border-width;\n border-top-width: $popover-arrow-width * 0.5;\n border-right-width: 0;\n border-left-width: $popover-arrow-height;\n border-bottom-width: $popover-arrow-width * 0.5;\n border-left-color: $popover-arrow-color;\n "])))
|
|
5929
|
+
});
|
|
5930
|
+
var PopoverArrow = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5931
|
+
var style = props.style,
|
|
5932
|
+
elementProps = _objectWithoutProperties(props, _excluded$l);
|
|
5933
|
+
|
|
5934
|
+
var _useForcedContext = useForcedContext(PopoverContext),
|
|
5935
|
+
placement = _useForcedContext.placement,
|
|
5936
|
+
arrowStyle = _useForcedContext.arrowStyle,
|
|
5937
|
+
popper = _useForcedContext.popper;
|
|
5938
|
+
|
|
5939
|
+
var classes = getStyles(styles$h, ['.popover-arrow', popper && ".popover-arrow-".concat(placement)]);
|
|
5940
|
+
var beforeClasses = getStyles(styles$h, ['.popover-arrow::before', popper && ".bs-popover-".concat(placement, " .popover-arrow::before")]);
|
|
5941
|
+
var afterClasses = getStyles(styles$h, ['.popover-arrow::after', popper && ".bs-popover-".concat(placement, " .popover-arrow::after")]);
|
|
5942
|
+
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5943
|
+
ref: ref,
|
|
5944
|
+
style: [classes, arrowStyle, style]
|
|
5945
|
+
}), /*#__PURE__*/React__default["default"].createElement(View, {
|
|
5946
|
+
style: beforeClasses
|
|
5947
|
+
}), /*#__PURE__*/React__default["default"].createElement(View, {
|
|
5948
|
+
style: afterClasses
|
|
5949
|
+
}));
|
|
5950
|
+
});
|
|
5951
|
+
PopoverArrow.displayName = 'PopoverArrow';
|
|
5952
|
+
PopoverArrow.propTypes = propTypes$l;
|
|
5953
|
+
|
|
5954
|
+
var _excluded$k = ["children", "style"];
|
|
5955
|
+
|
|
5956
|
+
var _templateObject$g;
|
|
5957
|
+
var propTypes$k = {
|
|
5740
5958
|
children: PropTypes__default["default"].node.isRequired,
|
|
5741
5959
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5742
5960
|
style: PropTypes__default["default"].any
|
|
5743
5961
|
};
|
|
5744
|
-
var styles$
|
|
5745
|
-
'.popover-header': css(_templateObject$
|
|
5962
|
+
var styles$g = StyleSheet.create({
|
|
5963
|
+
'.popover-header': css(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n padding: $popover-header-padding-y $popover-header-padding-x;\n margin-bottom: 0; // Reset the default from Reboot\n font-size: $font-size-base;\n line-height: $font-size-base * $headings-line-height; // added for bootstrap-rn\n color: $popover-header-color;\n background-color: $popover-header-bg;\n border-bottom-width: $popover-border-width;\n border-style: solid;\n border-color: $popover-border-color;\n border-top-left-radius: $popover-border-radius;\n border-top-right-radius: $popover-border-radius;\n "])))
|
|
5746
5964
|
});
|
|
5747
5965
|
var PopoverHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5748
5966
|
var children = props.children,
|
|
5749
5967
|
style = props.style,
|
|
5750
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5968
|
+
elementProps = _objectWithoutProperties(props, _excluded$k);
|
|
5751
5969
|
|
|
5752
|
-
var classes = getStyles(styles$
|
|
5970
|
+
var classes = getStyles(styles$g, ['.popover-header']);
|
|
5753
5971
|
return /*#__PURE__*/React__default["default"].createElement(Heading$1, _extends({}, elementProps, {
|
|
5754
5972
|
ref: ref,
|
|
5755
5973
|
size: 3,
|
|
@@ -5757,206 +5975,96 @@ var PopoverHeader = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
5757
5975
|
}), children);
|
|
5758
5976
|
});
|
|
5759
5977
|
PopoverHeader.displayName = 'PopoverHeader';
|
|
5760
|
-
PopoverHeader.propTypes = propTypes$
|
|
5978
|
+
PopoverHeader.propTypes = propTypes$k;
|
|
5761
5979
|
|
|
5762
|
-
var _excluded$
|
|
5980
|
+
var _excluded$j = ["children", "style"];
|
|
5763
5981
|
|
|
5764
|
-
var _templateObject$
|
|
5765
|
-
var propTypes$
|
|
5982
|
+
var _templateObject$f, _templateObject2$a;
|
|
5983
|
+
var propTypes$j = {
|
|
5766
5984
|
children: PropTypes__default["default"].node.isRequired,
|
|
5767
5985
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5768
5986
|
style: PropTypes__default["default"].any
|
|
5769
5987
|
};
|
|
5770
|
-
var styles$
|
|
5771
|
-
'.popover-body': css(_templateObject$
|
|
5772
|
-
'.popover-body-text': css(_templateObject2$
|
|
5988
|
+
var styles$f = StyleSheet.create({
|
|
5989
|
+
'.popover-body': css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n padding: $popover-body-padding-y $popover-body-padding-x;\n "]))),
|
|
5990
|
+
'.popover-body-text': css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n color: $popover-body-color;\n "])))
|
|
5773
5991
|
});
|
|
5774
5992
|
var PopoverBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5775
|
-
var children = props.children
|
|
5776
|
-
props.style
|
|
5777
|
-
|
|
5993
|
+
var children = props.children,
|
|
5994
|
+
style = props.style,
|
|
5995
|
+
elementProps = _objectWithoutProperties(props, _excluded$j);
|
|
5778
5996
|
|
|
5779
|
-
var classes = getStyles(styles$
|
|
5780
|
-
var textClasses = getStyles(styles$
|
|
5997
|
+
var classes = getStyles(styles$f, ['.popover-body']);
|
|
5998
|
+
var textClasses = getStyles(styles$f, ['.popover-body-text']);
|
|
5781
5999
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5782
6000
|
ref: ref,
|
|
5783
|
-
style: [classes]
|
|
6001
|
+
style: [classes, style]
|
|
5784
6002
|
}), /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
|
|
5785
6003
|
style: textClasses
|
|
5786
6004
|
}, children));
|
|
5787
6005
|
});
|
|
5788
6006
|
PopoverBody.displayName = 'PopoverBody';
|
|
5789
|
-
PopoverBody.propTypes = propTypes$
|
|
6007
|
+
PopoverBody.propTypes = propTypes$j;
|
|
5790
6008
|
|
|
5791
|
-
var _excluded$
|
|
6009
|
+
var _excluded$i = ["children", "placement", "popper", "style", "arrowStyle"];
|
|
5792
6010
|
|
|
5793
|
-
var _templateObject$
|
|
5794
|
-
var propTypes$
|
|
6011
|
+
var _templateObject$e, _templateObject2$9;
|
|
6012
|
+
var propTypes$i = {
|
|
5795
6013
|
children: PropTypes__default["default"].node.isRequired,
|
|
6014
|
+
placement: PropTypes__default["default"].string,
|
|
6015
|
+
popper: PropTypes__default["default"].bool,
|
|
5796
6016
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5797
|
-
style: PropTypes__default["default"].any
|
|
6017
|
+
style: PropTypes__default["default"].any,
|
|
6018
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6019
|
+
arrowStyle: PropTypes__default["default"].any
|
|
5798
6020
|
};
|
|
5799
|
-
var styles$
|
|
5800
|
-
'.popover': css(_templateObject$
|
|
5801
|
-
'.popover-text': css(_templateObject2$
|
|
6021
|
+
var styles$e = StyleSheet.create({
|
|
6022
|
+
'.popover': css(_templateObject$e || (_templateObject$e = _taggedTemplateLiteral(["\n position: absolute;\n // top: 0;\n // left: 0 #{\"/* rtl:ignore */\"};\n z-index: $zindex-popover;\n // display: block;\n max-width: $popover-max-width;\n background-color: $popover-bg;\n // background-clip: padding-box;\n border: $popover-border-width solid $popover-border-color;\n border-radius: $popover-border-radius;\n // @include box-shadow($popover-box-shadow);\n "]))),
|
|
6023
|
+
'.popover-text': css(_templateObject2$9 || (_templateObject2$9 = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $popover-font-size;\n // Allow breaking very long words so they don't overflow the popover's bounds\n // word-wrap: break-word;\n "])))
|
|
5802
6024
|
});
|
|
5803
6025
|
var Popover = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5804
6026
|
var children = props.children,
|
|
6027
|
+
_props$placement = props.placement,
|
|
6028
|
+
placement = _props$placement === void 0 ? 'right' : _props$placement,
|
|
6029
|
+
popper = props.popper,
|
|
5805
6030
|
style = props.style,
|
|
5806
|
-
|
|
6031
|
+
arrowStyle = props.arrowStyle,
|
|
6032
|
+
elementProps = _objectWithoutProperties(props, _excluded$i);
|
|
5807
6033
|
|
|
5808
|
-
var
|
|
5809
|
-
|
|
6034
|
+
var popover = {
|
|
6035
|
+
placement: transformPlacement$1(placement),
|
|
6036
|
+
arrowStyle: arrowStyle,
|
|
6037
|
+
popper: popper
|
|
6038
|
+
};
|
|
6039
|
+
var classes = getStyles(styles$e, ['.popover']);
|
|
6040
|
+
var textClasses = getStyles(styles$e, ['.popover-text']); // Accessiblity role tooltip is only supported on web.
|
|
5810
6041
|
|
|
5811
6042
|
var role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
|
|
5812
6043
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
5813
6044
|
ref: ref,
|
|
5814
6045
|
accessibilityRole: role,
|
|
5815
6046
|
style: [classes, style]
|
|
5816
|
-
}), /*#__PURE__*/React__default["default"].createElement(
|
|
6047
|
+
}), /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
|
|
6048
|
+
value: popover
|
|
6049
|
+
}, /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
|
|
5817
6050
|
style: textClasses
|
|
5818
|
-
}, children));
|
|
6051
|
+
}, children)));
|
|
5819
6052
|
});
|
|
5820
6053
|
Popover.displayName = 'Popover';
|
|
5821
|
-
Popover.propTypes = propTypes$
|
|
6054
|
+
Popover.propTypes = propTypes$i;
|
|
6055
|
+
Popover.Arrow = PopoverArrow;
|
|
5822
6056
|
Popover.Header = PopoverHeader;
|
|
5823
6057
|
Popover.Body = PopoverBody;
|
|
5824
6058
|
|
|
5825
|
-
var
|
|
5826
|
-
|
|
5827
|
-
var
|
|
5828
|
-
trigger: PropTypes__default["default"].oneOf(TRIGGERS),
|
|
5829
|
-
placement: PropTypes__default["default"].oneOf(PLACEMENTS),
|
|
5830
|
-
defaultVisible: PropTypes__default["default"].bool,
|
|
5831
|
-
visible: PropTypes__default["default"].bool,
|
|
5832
|
-
onToggle: PropTypes__default["default"].func,
|
|
5833
|
-
arrowStyle: PropTypes__default["default"].any
|
|
5834
|
-
};
|
|
5835
|
-
function useOverlay(target, template, config) {
|
|
5836
|
-
var rawTrigger = config.trigger,
|
|
5837
|
-
placement = config.placement,
|
|
5838
|
-
_config$defaultVisibl = config.defaultVisible,
|
|
5839
|
-
defaultVisible = _config$defaultVisibl === void 0 ? false : _config$defaultVisibl,
|
|
5840
|
-
controlledVisible = config.visible,
|
|
5841
|
-
onToggle = config.onToggle,
|
|
5842
|
-
arrowStyle = config.arrowStyle;
|
|
5843
|
-
var trigger = rawTrigger.split(' ');
|
|
5844
|
-
var identifier = useIdentifier('overlay');
|
|
5845
|
-
|
|
5846
|
-
var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
|
|
5847
|
-
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
5848
|
-
visible = _useControlledState2[0],
|
|
5849
|
-
setVisible = _useControlledState2[1];
|
|
5850
|
-
|
|
5851
|
-
var _useState = React.useState(false),
|
|
5852
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
5853
|
-
focused = _useState2[0],
|
|
5854
|
-
setFocused = _useState2[1];
|
|
5855
|
-
|
|
5856
|
-
var _useState3 = React.useState(false),
|
|
5857
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
5858
|
-
hovered = _useState4[0],
|
|
5859
|
-
setHovered = _useState4[1];
|
|
5860
|
-
|
|
5861
|
-
var targetElement = /*#__PURE__*/React__default["default"].cloneElement(target, _objectSpread2(_objectSpread2({
|
|
5862
|
-
key: 'target'
|
|
5863
|
-
}, optional(visible, {
|
|
5864
|
-
accessibilityDescribedBy: identifier
|
|
5865
|
-
})), {}, {
|
|
5866
|
-
onPress: function onPress(event) {
|
|
5867
|
-
if (trigger.includes('click')) {
|
|
5868
|
-
setVisible(function (value) {
|
|
5869
|
-
return !value;
|
|
5870
|
-
});
|
|
5871
|
-
}
|
|
5872
|
-
|
|
5873
|
-
if (target.props.onPress) {
|
|
5874
|
-
target.props.onPress(event);
|
|
5875
|
-
}
|
|
5876
|
-
},
|
|
5877
|
-
onFocus: function onFocus(event) {
|
|
5878
|
-
if (trigger.includes('focus')) {
|
|
5879
|
-
setFocused(true);
|
|
5880
|
-
|
|
5881
|
-
if (!visible) {
|
|
5882
|
-
setVisible(true);
|
|
5883
|
-
}
|
|
5884
|
-
}
|
|
5885
|
-
|
|
5886
|
-
if (target.props.onFocus) {
|
|
5887
|
-
target.props.onFocus(event);
|
|
5888
|
-
}
|
|
5889
|
-
},
|
|
5890
|
-
onBlur: function onBlur(event) {
|
|
5891
|
-
if (trigger.includes('focus')) {
|
|
5892
|
-
setFocused(false);
|
|
5893
|
-
var activeHoverTrigger = trigger.includes('hover') && hovered;
|
|
5894
|
-
|
|
5895
|
-
if (visible && !activeHoverTrigger) {
|
|
5896
|
-
setVisible(false);
|
|
5897
|
-
}
|
|
5898
|
-
}
|
|
5899
|
-
|
|
5900
|
-
if (target.props.onBlur) {
|
|
5901
|
-
target.props.onBlur(event);
|
|
5902
|
-
}
|
|
5903
|
-
},
|
|
5904
|
-
onMouseOver: function onMouseOver(event) {
|
|
5905
|
-
if (trigger.includes('hover')) {
|
|
5906
|
-
setHovered(true);
|
|
5907
|
-
|
|
5908
|
-
if (!visible && !focused) {
|
|
5909
|
-
setVisible(true);
|
|
5910
|
-
}
|
|
5911
|
-
}
|
|
5912
|
-
|
|
5913
|
-
if (target.props.onMouseOver) {
|
|
5914
|
-
target.props.onMouseOver(event);
|
|
5915
|
-
}
|
|
5916
|
-
},
|
|
5917
|
-
onMouseLeave: function onMouseLeave(event) {
|
|
5918
|
-
if (trigger.includes('hover')) {
|
|
5919
|
-
setHovered(false);
|
|
5920
|
-
var activeFocusTrigger = trigger.includes('focus') && focused;
|
|
5921
|
-
|
|
5922
|
-
if (visible && !activeFocusTrigger) {
|
|
5923
|
-
setVisible(false);
|
|
5924
|
-
}
|
|
5925
|
-
}
|
|
5926
|
-
|
|
5927
|
-
if (target.props.onMouveLeave) {
|
|
5928
|
-
target.props.onMouseLeave(event);
|
|
5929
|
-
}
|
|
5930
|
-
}
|
|
5931
|
-
}));
|
|
5932
|
-
var templateElement = /*#__PURE__*/React__default["default"].cloneElement(template, {
|
|
5933
|
-
nativeID: identifier
|
|
5934
|
-
});
|
|
5935
|
-
return /*#__PURE__*/React__default["default"].createElement(Overlay__default["default"], {
|
|
5936
|
-
from: targetElement,
|
|
5937
|
-
isVisible: visible,
|
|
5938
|
-
placement: placement,
|
|
5939
|
-
popoverStyle: {
|
|
5940
|
-
backgroundColor: 'transparent'
|
|
5941
|
-
},
|
|
5942
|
-
backgroundStyle: {
|
|
5943
|
-
backgroundColor: 'transparent'
|
|
5944
|
-
},
|
|
5945
|
-
arrowStyle: arrowStyle,
|
|
5946
|
-
onRequestClose: function onRequestClose() {
|
|
5947
|
-
setVisible(false);
|
|
5948
|
-
}
|
|
5949
|
-
}, templateElement);
|
|
5950
|
-
}
|
|
5951
|
-
|
|
5952
|
-
var _excluded$f = ["popover"];
|
|
5953
|
-
var propTypes$f = {
|
|
6059
|
+
var _excluded$h = ["title", "content", "trigger", "placement"],
|
|
6060
|
+
_excluded2$1 = ["popover"];
|
|
6061
|
+
var propTypes$h = {
|
|
5954
6062
|
popover: PropTypes__default["default"].shape(_objectSpread2({
|
|
5955
6063
|
title: PropTypes__default["default"].node,
|
|
5956
6064
|
content: PropTypes__default["default"].node.isRequired
|
|
5957
|
-
},
|
|
6065
|
+
}, TriggerPropTypes))
|
|
5958
6066
|
};
|
|
5959
|
-
function injectPopover(
|
|
6067
|
+
function injectPopover(Target) {
|
|
5960
6068
|
var OverlayPopover = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
5961
6069
|
/* eslint-disable react/prop-types */
|
|
5962
6070
|
var _props$popover = props.popover,
|
|
@@ -5966,48 +6074,56 @@ function injectPopover(Component) {
|
|
|
5966
6074
|
trigger = _props$popover$trigge === void 0 ? 'click' : _props$popover$trigge,
|
|
5967
6075
|
_props$popover$placem = _props$popover.placement,
|
|
5968
6076
|
placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
|
|
5969
|
-
|
|
5970
|
-
|
|
5971
|
-
onToggle = _props$popover.onToggle,
|
|
5972
|
-
elementProps = _objectWithoutProperties(props, _excluded$f);
|
|
6077
|
+
tooltipProps = _objectWithoutProperties(_props$popover, _excluded$h),
|
|
6078
|
+
elementProps = _objectWithoutProperties(props, _excluded2$1);
|
|
5973
6079
|
/* eslint-enable */
|
|
5974
6080
|
|
|
5975
6081
|
|
|
5976
|
-
var
|
|
5977
|
-
|
|
5978
|
-
|
|
5979
|
-
|
|
5980
|
-
|
|
5981
|
-
|
|
6082
|
+
var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
|
|
6083
|
+
visible = _useTrigger.visible,
|
|
6084
|
+
targetProps = _useTrigger.targetProps,
|
|
6085
|
+
targetRef = _useTrigger.targetRef,
|
|
6086
|
+
templateProps = _useTrigger.templateProps;
|
|
6087
|
+
|
|
6088
|
+
var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
|
|
6089
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
|
|
5982
6090
|
placement: placement,
|
|
5983
|
-
|
|
5984
|
-
|
|
5985
|
-
|
|
5986
|
-
|
|
5987
|
-
|
|
5988
|
-
}
|
|
5989
|
-
|
|
6091
|
+
offset: offset,
|
|
6092
|
+
arrowOffset: offset,
|
|
6093
|
+
targetRef: targetRef,
|
|
6094
|
+
visible: visible
|
|
6095
|
+
}, function (overlay, overlayRef) {
|
|
6096
|
+
return /*#__PURE__*/React__default["default"].createElement(Popover, _extends({}, templateProps, {
|
|
6097
|
+
ref: overlayRef,
|
|
6098
|
+
placement: overlay.placement,
|
|
6099
|
+
popper: overlay.rendered,
|
|
6100
|
+
style: [{
|
|
6101
|
+
opacity: overlay.rendered ? 1 : 0
|
|
6102
|
+
}, overlay.overlayProps.style],
|
|
6103
|
+
arrowStyle: overlay.arrowProps.style
|
|
6104
|
+
}), /*#__PURE__*/React__default["default"].createElement(Popover.Arrow, null), title && /*#__PURE__*/React__default["default"].createElement(Popover.Header, null, title), /*#__PURE__*/React__default["default"].createElement(Popover.Body, null, content));
|
|
6105
|
+
})));
|
|
5990
6106
|
});
|
|
5991
6107
|
OverlayPopover.displayName = 'Overlay(Popover)';
|
|
5992
|
-
OverlayPopover.propTypes = propTypes$
|
|
6108
|
+
OverlayPopover.propTypes = propTypes$h;
|
|
5993
6109
|
return OverlayPopover;
|
|
5994
6110
|
}
|
|
5995
6111
|
|
|
5996
6112
|
var ProgressContext = /*#__PURE__*/React__default["default"].createContext();
|
|
5997
6113
|
ProgressContext.displayName = 'ProgressContext';
|
|
5998
6114
|
|
|
5999
|
-
var _excluded$
|
|
6115
|
+
var _excluded$g = ["children", "value", "style"];
|
|
6000
6116
|
|
|
6001
|
-
var _templateObject$
|
|
6002
|
-
var propTypes$
|
|
6117
|
+
var _templateObject$d, _templateObject2$8;
|
|
6118
|
+
var propTypes$g = {
|
|
6003
6119
|
children: PropTypes__default["default"].node,
|
|
6004
6120
|
value: PropTypes__default["default"].number.isRequired,
|
|
6005
6121
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6006
6122
|
style: PropTypes__default["default"].any
|
|
6007
6123
|
};
|
|
6008
|
-
var styles$
|
|
6009
|
-
'.progress-bar': css(_templateObject$
|
|
6010
|
-
'.progress-bar-text': css(_templateObject2$
|
|
6124
|
+
var styles$d = StyleSheet.create({
|
|
6125
|
+
'.progress-bar': css(_templateObject$d || (_templateObject$d = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n justify-content: center;\n overflow: hidden;\n background-color: $progress-bar-bg;\n // @include transition($progress-bar-transition);\n "]))),
|
|
6126
|
+
'.progress-bar-text': css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n color: $progress-bar-color;\n text-align: center;\n // white-space: nowrap;\n "])))
|
|
6011
6127
|
});
|
|
6012
6128
|
var ROUND_PRECISION = 1000;
|
|
6013
6129
|
|
|
@@ -6020,14 +6136,14 @@ var ProgressBar = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
6020
6136
|
var children = props.children,
|
|
6021
6137
|
value = props.value,
|
|
6022
6138
|
style = props.style,
|
|
6023
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6139
|
+
elementProps = _objectWithoutProperties(props, _excluded$g);
|
|
6024
6140
|
|
|
6025
6141
|
var _useForcedContext = useForcedContext(ProgressContext),
|
|
6026
6142
|
min = _useForcedContext.min,
|
|
6027
6143
|
max = _useForcedContext.max;
|
|
6028
6144
|
|
|
6029
|
-
var classes = getStyles(styles$
|
|
6030
|
-
var textClasses = getStyles(styles$
|
|
6145
|
+
var classes = getStyles(styles$d, ['.progress-bar']);
|
|
6146
|
+
var textClasses = getStyles(styles$d, ['.progress-bar-text']);
|
|
6031
6147
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6032
6148
|
ref: ref,
|
|
6033
6149
|
style: [classes, style, {
|
|
@@ -6042,7 +6158,7 @@ var ProgressBar = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
6042
6158
|
}, /*#__PURE__*/React__default["default"].createElement(Text, null, children || ' ')));
|
|
6043
6159
|
});
|
|
6044
6160
|
ProgressBar.displayName = 'ProgressBar';
|
|
6045
|
-
ProgressBar.propTypes = propTypes$
|
|
6161
|
+
ProgressBar.propTypes = propTypes$g;
|
|
6046
6162
|
|
|
6047
6163
|
function useProgress(min, max) {
|
|
6048
6164
|
return React.useMemo(function () {
|
|
@@ -6053,19 +6169,19 @@ function useProgress(min, max) {
|
|
|
6053
6169
|
}, [min, max]);
|
|
6054
6170
|
}
|
|
6055
6171
|
|
|
6056
|
-
var _excluded$
|
|
6172
|
+
var _excluded$f = ["children", "min", "max", "style"];
|
|
6057
6173
|
|
|
6058
|
-
var _templateObject$
|
|
6059
|
-
var propTypes$
|
|
6174
|
+
var _templateObject$c, _templateObject2$7;
|
|
6175
|
+
var propTypes$f = {
|
|
6060
6176
|
children: PropTypes__default["default"].node.isRequired,
|
|
6061
6177
|
min: PropTypes__default["default"].number,
|
|
6062
6178
|
max: PropTypes__default["default"].number,
|
|
6063
6179
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6064
6180
|
style: PropTypes__default["default"].any
|
|
6065
6181
|
};
|
|
6066
|
-
var styles$
|
|
6067
|
-
'.progress': css(_templateObject$
|
|
6068
|
-
'.progress-text': css(_templateObject2$
|
|
6182
|
+
var styles$c = StyleSheet.create({
|
|
6183
|
+
'.progress': css(_templateObject$c || (_templateObject$c = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n height: $progress-height;\n overflow: hidden; // force rounded corners by cropping it\n background-color: $progress-bg;\n border-radius: $progress-border-radius;\n // @include box-shadow($progress-box-shadow);\n "]))),
|
|
6184
|
+
'.progress-text': css(_templateObject2$7 || (_templateObject2$7 = _taggedTemplateLiteral(["\n font-size: $progress-font-size;\n line-height: $progress-font-size * $line-height-base; // added for bootstrap-rn\n "])))
|
|
6069
6185
|
});
|
|
6070
6186
|
var Progress = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6071
6187
|
var children = props.children,
|
|
@@ -6074,11 +6190,11 @@ var Progress = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
6074
6190
|
_props$max = props.max,
|
|
6075
6191
|
max = _props$max === void 0 ? 100 : _props$max,
|
|
6076
6192
|
style = props.style,
|
|
6077
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6193
|
+
elementProps = _objectWithoutProperties(props, _excluded$f);
|
|
6078
6194
|
|
|
6079
6195
|
var progress = useProgress(min, max);
|
|
6080
|
-
var classes = getStyles(styles$
|
|
6081
|
-
var textClasses = getStyles(styles$
|
|
6196
|
+
var classes = getStyles(styles$c, ['.progress']);
|
|
6197
|
+
var textClasses = getStyles(styles$c, ['.progress-text']);
|
|
6082
6198
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6083
6199
|
ref: ref,
|
|
6084
6200
|
style: [classes, style]
|
|
@@ -6089,32 +6205,32 @@ var Progress = /*#__PURE__*/React__default["default"].forwardRef(function (props
|
|
|
6089
6205
|
}, children)));
|
|
6090
6206
|
});
|
|
6091
6207
|
Progress.displayName = 'Progress';
|
|
6092
|
-
Progress.propTypes = propTypes$
|
|
6208
|
+
Progress.propTypes = propTypes$f;
|
|
6093
6209
|
Progress.Bar = ProgressBar;
|
|
6094
6210
|
|
|
6095
|
-
var _excluded$
|
|
6211
|
+
var _excluded$e = ["children", "style"];
|
|
6096
6212
|
|
|
6097
|
-
var _templateObject$
|
|
6098
|
-
var propTypes$
|
|
6213
|
+
var _templateObject$b, _templateObject2$6;
|
|
6214
|
+
var propTypes$e = {
|
|
6099
6215
|
children: PropTypes__default["default"].node.isRequired,
|
|
6100
6216
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6101
6217
|
style: PropTypes__default["default"].any
|
|
6102
6218
|
};
|
|
6103
|
-
var styles$
|
|
6104
|
-
'.toast-header': css(_templateObject$
|
|
6219
|
+
var styles$b = StyleSheet.create({
|
|
6220
|
+
'.toast-header': css(_templateObject$b || (_templateObject$b = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row; // added for bootstrap-rn\n align-items: center;\n padding: $toast-padding-y $toast-padding-x;\n background-color: $toast-header-background-color;\n // background-clip: padding-box;\n border-bottom-width: $toast-border-width;\n border-style: solid;\n border-color: $toast-header-border-color;\n border-top-left-radius: ", ";\n border-top-right-radius: ", ";\n "])), function (t) {
|
|
6105
6221
|
return subtract(t['toast-border-radius'], t['toast-border-width']);
|
|
6106
6222
|
}, function (t) {
|
|
6107
6223
|
return subtract(t['toast-border-radius'], t['toast-border-width']);
|
|
6108
6224
|
}),
|
|
6109
|
-
'.toast-header-text': css(_templateObject2$
|
|
6225
|
+
'.toast-header-text': css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n color: $toast-header-color;\n "])))
|
|
6110
6226
|
});
|
|
6111
6227
|
var ToastHeader = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6112
6228
|
var children = props.children,
|
|
6113
6229
|
style = props.style,
|
|
6114
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6230
|
+
elementProps = _objectWithoutProperties(props, _excluded$e);
|
|
6115
6231
|
|
|
6116
|
-
var classes = getStyles(styles$
|
|
6117
|
-
var textClasses = getStyles(styles$
|
|
6232
|
+
var classes = getStyles(styles$b, ['.toast-header']);
|
|
6233
|
+
var textClasses = getStyles(styles$b, ['.toast-header-text']);
|
|
6118
6234
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6119
6235
|
ref: ref,
|
|
6120
6236
|
style: [classes, style]
|
|
@@ -6123,27 +6239,27 @@ var ToastHeader = /*#__PURE__*/React__default["default"].forwardRef(function (pr
|
|
|
6123
6239
|
}, children));
|
|
6124
6240
|
});
|
|
6125
6241
|
ToastHeader.displayName = 'ToastHeader';
|
|
6126
|
-
ToastHeader.propTypes = propTypes$
|
|
6242
|
+
ToastHeader.propTypes = propTypes$e;
|
|
6127
6243
|
|
|
6128
|
-
var _excluded$
|
|
6244
|
+
var _excluded$d = ["children", "style"];
|
|
6129
6245
|
|
|
6130
|
-
var _templateObject$
|
|
6131
|
-
var propTypes$
|
|
6246
|
+
var _templateObject$a, _templateObject2$5;
|
|
6247
|
+
var propTypes$d = {
|
|
6132
6248
|
children: PropTypes__default["default"].node.isRequired,
|
|
6133
6249
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6134
6250
|
style: PropTypes__default["default"].any
|
|
6135
6251
|
};
|
|
6136
|
-
var styles$
|
|
6137
|
-
'.toast-body': css(_templateObject$
|
|
6138
|
-
'.toast-body-text': css(_templateObject2$
|
|
6252
|
+
var styles$a = StyleSheet.create({
|
|
6253
|
+
'.toast-body': css(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n padding: $toast-padding-x; // apply to both vertical and horizontal\n "]))),
|
|
6254
|
+
'.toast-body-text': css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n @include platform(web) {\n word-wrap: break-word;\n }\n "])))
|
|
6139
6255
|
});
|
|
6140
6256
|
var ToastBody = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6141
6257
|
var children = props.children,
|
|
6142
6258
|
style = props.style,
|
|
6143
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6259
|
+
elementProps = _objectWithoutProperties(props, _excluded$d);
|
|
6144
6260
|
|
|
6145
|
-
var classes = getStyles(styles$
|
|
6146
|
-
var textClasses = getStyles(styles$
|
|
6261
|
+
var classes = getStyles(styles$a, ['.toast-body']);
|
|
6262
|
+
var textClasses = getStyles(styles$a, [".toast-body-text"]);
|
|
6147
6263
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6148
6264
|
ref: ref,
|
|
6149
6265
|
style: [classes, style]
|
|
@@ -6152,35 +6268,35 @@ var ToastBody = /*#__PURE__*/React__default["default"].forwardRef(function (prop
|
|
|
6152
6268
|
}, children));
|
|
6153
6269
|
});
|
|
6154
6270
|
ToastBody.displayName = 'ToastBody';
|
|
6155
|
-
ToastBody.propTypes = propTypes$
|
|
6271
|
+
ToastBody.propTypes = propTypes$d;
|
|
6156
6272
|
|
|
6157
6273
|
var ToastContainerContext = /*#__PURE__*/React__default["default"].createContext();
|
|
6158
6274
|
ToastContainerContext.displayName = 'ToastContainerContext';
|
|
6159
6275
|
|
|
6160
|
-
var _excluded$
|
|
6276
|
+
var _excluded$c = ["children", "last", "style"];
|
|
6161
6277
|
|
|
6162
|
-
var _templateObject$
|
|
6163
|
-
var propTypes$
|
|
6278
|
+
var _templateObject$9, _templateObject2$4, _templateObject3$2;
|
|
6279
|
+
var propTypes$c = {
|
|
6164
6280
|
children: PropTypes__default["default"].node.isRequired,
|
|
6165
6281
|
last: PropTypes__default["default"].bool,
|
|
6166
6282
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6167
6283
|
style: PropTypes__default["default"].any
|
|
6168
6284
|
};
|
|
6169
|
-
var styles$
|
|
6170
|
-
'.toast': css(_templateObject$
|
|
6171
|
-
'.toast-text': css(_templateObject2$
|
|
6172
|
-
'.toast-container .toast': css(_templateObject3$
|
|
6285
|
+
var styles$9 = StyleSheet.create({
|
|
6286
|
+
'.toast': css(_templateObject$9 || (_templateObject$9 = _taggedTemplateLiteral(["\n width: $toast-max-width;\n max-width: 100%;\n // pointer-events: auto;\n background-color: $toast-background-color;\n // background-clip: padding-box;\n border: $toast-border-width solid $toast-border-color;\n // box-shadow: $toast-box-shadow;\n border-radius: $toast-border-radius;\n "]))),
|
|
6287
|
+
'.toast-text': css(_templateObject2$4 || (_templateObject2$4 = _taggedTemplateLiteral(["\n font-size: $toast-font-size;\n line-height: $toast-font-size * $line-height-base; // added for bootstrap-rn\n color: $toast-color;\n "]))),
|
|
6288
|
+
'.toast-container .toast': css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n margin-bottom: $toast-spacing;\n "])))
|
|
6173
6289
|
});
|
|
6174
6290
|
var Toast = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6175
6291
|
var children = props.children,
|
|
6176
6292
|
_props$last = props.last,
|
|
6177
6293
|
last = _props$last === void 0 ? false : _props$last,
|
|
6178
6294
|
style = props.style,
|
|
6179
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6295
|
+
elementProps = _objectWithoutProperties(props, _excluded$c);
|
|
6180
6296
|
|
|
6181
6297
|
var container = React.useContext(ToastContainerContext);
|
|
6182
|
-
var classes = getStyles(styles$
|
|
6183
|
-
var textClasses = getStyles(styles$
|
|
6298
|
+
var classes = getStyles(styles$9, ['.toast', container && !last && '.toast-container .toast']);
|
|
6299
|
+
var textClasses = getStyles(styles$9, [".toast-text"]);
|
|
6184
6300
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6185
6301
|
ref: ref,
|
|
6186
6302
|
accessibilityRole: "alert",
|
|
@@ -6192,27 +6308,27 @@ var Toast = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
|
|
|
6192
6308
|
}, children));
|
|
6193
6309
|
});
|
|
6194
6310
|
Toast.displayName = 'Toast';
|
|
6195
|
-
Toast.propTypes = propTypes$
|
|
6311
|
+
Toast.propTypes = propTypes$c;
|
|
6196
6312
|
Toast.Header = ToastHeader;
|
|
6197
6313
|
Toast.Body = ToastBody;
|
|
6198
6314
|
|
|
6199
|
-
var _excluded$
|
|
6315
|
+
var _excluded$b = ["children", "style"];
|
|
6200
6316
|
|
|
6201
|
-
var _templateObject$
|
|
6202
|
-
var propTypes$
|
|
6317
|
+
var _templateObject$8;
|
|
6318
|
+
var propTypes$b = {
|
|
6203
6319
|
children: PropTypes__default["default"].node.isRequired,
|
|
6204
6320
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6205
6321
|
style: PropTypes__default["default"].any
|
|
6206
6322
|
};
|
|
6207
|
-
var styles$
|
|
6208
|
-
'.toast-container': css(_templateObject$
|
|
6323
|
+
var styles$8 = StyleSheet.create({
|
|
6324
|
+
'.toast-container': css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n width: 100%; // max-content;\n max-width: 100%;\n // pointer-events: none;\n "])))
|
|
6209
6325
|
});
|
|
6210
6326
|
var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6211
6327
|
var children = props.children,
|
|
6212
6328
|
style = props.style,
|
|
6213
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6329
|
+
elementProps = _objectWithoutProperties(props, _excluded$b);
|
|
6214
6330
|
|
|
6215
|
-
var classes = getStyles(styles$
|
|
6331
|
+
var classes = getStyles(styles$8, ['.toast-container']);
|
|
6216
6332
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6217
6333
|
ref: ref,
|
|
6218
6334
|
style: [classes, style]
|
|
@@ -6221,77 +6337,175 @@ var ToastContainer = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
6221
6337
|
}, makeListChildren(children)));
|
|
6222
6338
|
});
|
|
6223
6339
|
ToastContainer.displayName = 'ToastContainer';
|
|
6224
|
-
ToastContainer.propTypes = propTypes$
|
|
6340
|
+
ToastContainer.propTypes = propTypes$b;
|
|
6225
6341
|
|
|
6226
|
-
var
|
|
6342
|
+
var TooltipContext = /*#__PURE__*/React__default["default"].createContext();
|
|
6343
|
+
TooltipContext.displayName = 'TooltipContext';
|
|
6227
6344
|
|
|
6228
|
-
var
|
|
6229
|
-
|
|
6345
|
+
var _excluded$a = ["style"];
|
|
6346
|
+
|
|
6347
|
+
var _templateObject$7, _templateObject2$3, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
6348
|
+
var propTypes$a = {
|
|
6349
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6350
|
+
style: PropTypes__default["default"].any
|
|
6351
|
+
};
|
|
6352
|
+
var styles$7 = StyleSheet.create({
|
|
6353
|
+
'.tooltip-arrow': css(_templateObject$7 || (_templateObject$7 = _taggedTemplateLiteral(["\n position: absolute;\n // display: block;\n width: $tooltip-arrow-width;\n height: $tooltip-arrow-height;\n "]))),
|
|
6354
|
+
'.tooltip-arrow::before': css(_templateObject2$3 || (_templateObject2$3 = _taggedTemplateLiteral(["\n position: absolute;\n // content: \"\";\n border-top-color: transparent;\n border-right-color: transparent;\n border-left-color: transparent;\n border-bottom-color: transparent;\n border-style: solid;\n "]))),
|
|
6355
|
+
'.bs-tooltip-top .tooltip-arrow': css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n bottom: 0;\n "]))),
|
|
6356
|
+
'.bs-tooltip-top .tooltip-arrow::before': css(_templateObject4$1 || (_templateObject4$1 = _taggedTemplateLiteral(["\n top: -1px;\n border-top-width: $tooltip-arrow-height;\n border-right-width: $tooltip-arrow-width * 0.5;\n border-left-width: $tooltip-arrow-width * 0.5;\n border-bottom-width: 0;\n border-top-color: $tooltip-arrow-color;\n "]))),
|
|
6357
|
+
'.bs-tooltip-end .tooltip-arrow': css(_templateObject5$1 || (_templateObject5$1 = _taggedTemplateLiteral(["\n left: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n "]))),
|
|
6358
|
+
'.bs-tooltip-end .tooltip-arrow::before': css(_templateObject6$1 || (_templateObject6$1 = _taggedTemplateLiteral(["\n right: -1px;\n border-top-width: $tooltip-arrow-width * 0.5;\n border-right-width: $tooltip-arrow-height;\n border-left-width: 0;\n border-bottom-width: $tooltip-arrow-width * 0.5;\n border-right-color: $tooltip-arrow-color;\n "]))),
|
|
6359
|
+
'.bs-tooltip-bottom .tooltip-arrow': css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n top: 0;\n "]))),
|
|
6360
|
+
'.bs-tooltip-bottom .tooltip-arrow::before': css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n bottom: -1px;\n border-top-width: 0;\n border-right-width: $tooltip-arrow-width * 0.5;\n border-left-width: $tooltip-arrow-width * 0.5;\n border-bottom-width: $tooltip-arrow-height;\n border-bottom-color: $tooltip-arrow-color;\n "]))),
|
|
6361
|
+
'.bs-tooltip-start .tooltip-arrow': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n right: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n "]))),
|
|
6362
|
+
'.bs-tooltip-start .tooltip-arrow::before': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n left: -1px;\n border-top-width: $tooltip-arrow-width * 0.5;\n border-right-width: 0;\n border-left-width: $tooltip-arrow-height;\n border-bottom-width: $tooltip-arrow-width * 0.5;\n border-left-color: $tooltip-arrow-color;\n "])))
|
|
6363
|
+
});
|
|
6364
|
+
var TooltipArrow = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6365
|
+
var style = props.style,
|
|
6366
|
+
elementProps = _objectWithoutProperties(props, _excluded$a);
|
|
6367
|
+
|
|
6368
|
+
var _useForcedContext = useForcedContext(TooltipContext),
|
|
6369
|
+
placement = _useForcedContext.placement,
|
|
6370
|
+
arrowStyle = _useForcedContext.arrowStyle,
|
|
6371
|
+
popper = _useForcedContext.popper;
|
|
6372
|
+
|
|
6373
|
+
var classes = getStyles(styles$7, ['.tooltip-arrow', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow")]);
|
|
6374
|
+
var beforeClasses = getStyles(styles$7, ['.tooltip-arrow::before', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow::before")]);
|
|
6375
|
+
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6376
|
+
ref: ref,
|
|
6377
|
+
style: [classes, arrowStyle, style]
|
|
6378
|
+
}), /*#__PURE__*/React__default["default"].createElement(View, {
|
|
6379
|
+
style: beforeClasses
|
|
6380
|
+
}));
|
|
6381
|
+
});
|
|
6382
|
+
TooltipArrow.displayName = 'TooltipArrow';
|
|
6383
|
+
TooltipArrow.propTypes = propTypes$a;
|
|
6384
|
+
|
|
6385
|
+
var _excluded$9 = ["children", "style"];
|
|
6386
|
+
|
|
6387
|
+
var _templateObject$6;
|
|
6388
|
+
var propTypes$9 = {
|
|
6230
6389
|
children: PropTypes__default["default"].node.isRequired,
|
|
6231
6390
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6232
6391
|
style: PropTypes__default["default"].any
|
|
6233
6392
|
};
|
|
6393
|
+
var styles$6 = StyleSheet.create({
|
|
6394
|
+
'.tooltip-inner': css(_templateObject$6 || (_templateObject$6 = _taggedTemplateLiteral(["\n max-width: $tooltip-max-width;\n padding: $tooltip-padding-y $tooltip-padding-x;\n color: $tooltip-color;\n text-align: center;\n background-color: $tooltip-bg;\n border-radius: $tooltip-border-radius;\n "])))
|
|
6395
|
+
});
|
|
6396
|
+
var TooltipInner = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6397
|
+
var children = props.children,
|
|
6398
|
+
style = props.style,
|
|
6399
|
+
elementProps = _objectWithoutProperties(props, _excluded$9);
|
|
6400
|
+
|
|
6401
|
+
var classes = getStyles(styles$6, ['.tooltip-inner']);
|
|
6402
|
+
return /*#__PURE__*/React__default["default"].createElement(Text, _extends({}, elementProps, {
|
|
6403
|
+
ref: ref,
|
|
6404
|
+
style: [classes, style]
|
|
6405
|
+
}), children);
|
|
6406
|
+
});
|
|
6407
|
+
TooltipInner.displayName = 'TooltipInner';
|
|
6408
|
+
TooltipInner.propTypes = propTypes$9;
|
|
6409
|
+
|
|
6410
|
+
var _excluded$8 = ["children", "placement", "popper", "style", "arrowStyle"];
|
|
6411
|
+
|
|
6412
|
+
var _templateObject$5, _templateObject2$2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
6413
|
+
var propTypes$8 = {
|
|
6414
|
+
children: PropTypes__default["default"].node.isRequired,
|
|
6415
|
+
placement: PropTypes__default["default"].string,
|
|
6416
|
+
popper: PropTypes__default["default"].bool,
|
|
6417
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6418
|
+
style: PropTypes__default["default"].any,
|
|
6419
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6420
|
+
arrowStyle: PropTypes__default["default"].any
|
|
6421
|
+
};
|
|
6234
6422
|
var styles$5 = StyleSheet.create({
|
|
6235
|
-
'.tooltip': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n
|
|
6423
|
+
'.tooltip': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n position: absolute;\n z-index: $zindex-tooltip;\n // display: block;\n margin: $tooltip-margin;\n // opacity: 0;\n "]))),
|
|
6236
6424
|
'.tooltip-text': css(_templateObject2$2 || (_templateObject2$2 = _taggedTemplateLiteral(["\n // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.\n // So reset our font and text properties to avoid inheriting weird values.\n // @include reset-text();\n font-size: $tooltip-font-size;\n // Allow breaking very long words so they don't overflow the tooltip's bounds\n // word-wrap: break-word;\n "]))),
|
|
6237
|
-
'.tooltip-
|
|
6425
|
+
'.bs-tooltip-top': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
|
|
6426
|
+
'.bs-tooltip-end': css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 0 $tooltip-arrow-height;\n "]))),
|
|
6427
|
+
'.bs-tooltip-bottom': css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
|
|
6428
|
+
'.bs-tooltip-start': css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 0 $tooltip-arrow-height;\n "])))
|
|
6238
6429
|
});
|
|
6239
6430
|
var Tooltip = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6240
6431
|
var children = props.children,
|
|
6432
|
+
_props$placement = props.placement,
|
|
6433
|
+
placement = _props$placement === void 0 ? 'top' : _props$placement,
|
|
6434
|
+
popper = props.popper,
|
|
6241
6435
|
style = props.style,
|
|
6436
|
+
arrowStyle = props.arrowStyle,
|
|
6242
6437
|
elementProps = _objectWithoutProperties(props, _excluded$8);
|
|
6243
6438
|
|
|
6244
|
-
var
|
|
6245
|
-
|
|
6439
|
+
var tooltip = {
|
|
6440
|
+
placement: transformPlacement$1(placement),
|
|
6441
|
+
arrowStyle: arrowStyle,
|
|
6442
|
+
popper: popper
|
|
6443
|
+
};
|
|
6444
|
+
var classes = getStyles(styles$5, ['.tooltip', // Wait for rendering (of Overlay) before setting the offset.
|
|
6445
|
+
popper && ".bs-tooltip-".concat(tooltip.placement)]);
|
|
6446
|
+
var textClasses = getStyles(styles$5, ['.tooltip-text']); // Accessiblity role tooltip is only supported on web.
|
|
6246
6447
|
|
|
6247
6448
|
var role = reactNative.Platform.OS === 'web' ? 'tooltip' : null;
|
|
6248
6449
|
return /*#__PURE__*/React__default["default"].createElement(View, _extends({}, elementProps, {
|
|
6249
6450
|
ref: ref,
|
|
6250
6451
|
accessibilityRole: role,
|
|
6251
|
-
style: classes
|
|
6252
|
-
}), /*#__PURE__*/React__default["default"].createElement(
|
|
6253
|
-
|
|
6254
|
-
},
|
|
6452
|
+
style: [classes, style]
|
|
6453
|
+
}), /*#__PURE__*/React__default["default"].createElement(TooltipContext.Provider, {
|
|
6454
|
+
value: tooltip
|
|
6455
|
+
}, /*#__PURE__*/React__default["default"].createElement(TextStyleProvider, {
|
|
6456
|
+
style: textClasses
|
|
6457
|
+
}, children)));
|
|
6255
6458
|
});
|
|
6256
6459
|
Tooltip.displayName = 'Tooltip';
|
|
6257
6460
|
Tooltip.propTypes = propTypes$8;
|
|
6461
|
+
Tooltip.Arrow = TooltipArrow;
|
|
6462
|
+
Tooltip.Inner = TooltipInner;
|
|
6258
6463
|
|
|
6259
|
-
var _excluded$7 = ["
|
|
6464
|
+
var _excluded$7 = ["title", "trigger", "placement"],
|
|
6465
|
+
_excluded2 = ["tooltip"];
|
|
6260
6466
|
var propTypes$7 = {
|
|
6261
6467
|
tooltip: PropTypes__default["default"].shape(_objectSpread2({
|
|
6262
6468
|
title: PropTypes__default["default"].node.isRequired
|
|
6263
|
-
},
|
|
6469
|
+
}, TriggerPropTypes))
|
|
6264
6470
|
};
|
|
6265
|
-
|
|
6471
|
+
var defaultTrigger = reactNative.Platform.OS === 'web' ? 'hover' : 'click';
|
|
6472
|
+
function injectTooltip(Target) {
|
|
6266
6473
|
var OverlayTooltip = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
|
|
6267
6474
|
/* eslint-disable react/prop-types */
|
|
6268
6475
|
var _props$tooltip = props.tooltip,
|
|
6269
6476
|
title = _props$tooltip.title,
|
|
6270
6477
|
_props$tooltip$trigge = _props$tooltip.trigger,
|
|
6271
|
-
trigger = _props$tooltip$trigge === void 0 ?
|
|
6478
|
+
trigger = _props$tooltip$trigge === void 0 ? defaultTrigger : _props$tooltip$trigge,
|
|
6272
6479
|
_props$tooltip$placem = _props$tooltip.placement,
|
|
6273
6480
|
placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
|
|
6274
|
-
|
|
6275
|
-
|
|
6276
|
-
onToggle = _props$tooltip.onToggle,
|
|
6277
|
-
elementProps = _objectWithoutProperties(props, _excluded$7);
|
|
6481
|
+
tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$7),
|
|
6482
|
+
elementProps = _objectWithoutProperties(props, _excluded2);
|
|
6278
6483
|
/* eslint-enable */
|
|
6279
6484
|
|
|
6280
6485
|
|
|
6281
|
-
var
|
|
6282
|
-
|
|
6283
|
-
|
|
6284
|
-
|
|
6285
|
-
|
|
6286
|
-
|
|
6486
|
+
var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
|
|
6487
|
+
visible = _useTrigger.visible,
|
|
6488
|
+
targetProps = _useTrigger.targetProps,
|
|
6489
|
+
targetRef = _useTrigger.targetRef,
|
|
6490
|
+
templateProps = _useTrigger.templateProps;
|
|
6491
|
+
|
|
6492
|
+
var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
|
|
6493
|
+
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React__default["default"].createElement(overlays.OverlayContainer, null, /*#__PURE__*/React__default["default"].createElement(Overlay, {
|
|
6287
6494
|
placement: placement,
|
|
6288
|
-
|
|
6289
|
-
|
|
6290
|
-
|
|
6291
|
-
|
|
6292
|
-
|
|
6293
|
-
|
|
6294
|
-
|
|
6495
|
+
targetRef: targetRef,
|
|
6496
|
+
arrowOffset: offset,
|
|
6497
|
+
visible: visible
|
|
6498
|
+
}, function (overlay, overlayRef) {
|
|
6499
|
+
return /*#__PURE__*/React__default["default"].createElement(Tooltip, _extends({}, templateProps, {
|
|
6500
|
+
ref: overlayRef,
|
|
6501
|
+
placement: overlay.placement,
|
|
6502
|
+
popper: overlay.rendered,
|
|
6503
|
+
style: [{
|
|
6504
|
+
opacity: overlay.rendered ? 1 : 0
|
|
6505
|
+
}, overlay.overlayProps.style],
|
|
6506
|
+
arrowStyle: overlay.arrowProps.style
|
|
6507
|
+
}), /*#__PURE__*/React__default["default"].createElement(Tooltip.Arrow, null), /*#__PURE__*/React__default["default"].createElement(Tooltip.Inner, null, title));
|
|
6508
|
+
})));
|
|
6295
6509
|
});
|
|
6296
6510
|
OverlayTooltip.displayName = 'Overlay(Tooltip)';
|
|
6297
6511
|
OverlayTooltip.propTypes = propTypes$7;
|