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.esm.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
|
+
import { Platform, PixelRatio, StyleSheet as StyleSheet$1, I18nManager, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1 } from 'react-native';
|
|
1
2
|
import { getStylesForProperty, getPropertyName } from 'css-to-react-native';
|
|
2
|
-
import { Platform, PixelRatio, StyleSheet as StyleSheet$1, Dimensions, View as View$1, Text as Text$1, Pressable as Pressable$1, ScrollView as ScrollView$1, Modal as Modal$1, Picker as Picker$1, TextInput as TextInput$1, Image as Image$1, ImageBackground as ImageBackground$1 } from 'react-native';
|
|
3
3
|
import { rgba as rgba$1, mix } from 'polished';
|
|
4
4
|
import React, { useState, useEffect, useRef, useContext, useMemo, createContext } from 'react';
|
|
5
5
|
import { Svg, Path, Circle } from 'react-native-svg';
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import { OverlayProvider, useOverlayPosition, OverlayContainer } from '@react-native-aria/overlays';
|
|
8
8
|
import invariant from 'tiny-invariant';
|
|
9
|
-
import Overlay$1 from 'react-native-popover-view';
|
|
10
9
|
|
|
11
10
|
function ownKeys(object, enumerableOnly) {
|
|
12
11
|
var keys = Object.keys(object);
|
|
@@ -753,7 +752,19 @@ function transform(children, theme) {
|
|
|
753
752
|
|
|
754
753
|
|
|
755
754
|
if (child.type === 'declaration' && value !== 'null') {
|
|
756
|
-
if (child.name === '
|
|
755
|
+
if (child.name === 'box-shadow') {
|
|
756
|
+
if (Platform.OS === 'web') {
|
|
757
|
+
Object.assign(definitions[0].declarations, {
|
|
758
|
+
boxShadow: value
|
|
759
|
+
});
|
|
760
|
+
}
|
|
761
|
+
} else if (child.name === 'order') {
|
|
762
|
+
if (Platform.OS === 'web') {
|
|
763
|
+
Object.assign(definitions[0].declarations, {
|
|
764
|
+
order: value
|
|
765
|
+
});
|
|
766
|
+
}
|
|
767
|
+
} else if (child.name === 'border-color' && value.split(' ').length === 1) {
|
|
757
768
|
// Workaround for react-native issue #19981
|
|
758
769
|
// https://github.com/facebook/react-native/issues/19981
|
|
759
770
|
Object.assign(definitions[0].declarations, {
|
|
@@ -1030,6 +1041,17 @@ function optional(condition, value) {
|
|
|
1030
1041
|
function getElementId(identifier, name) {
|
|
1031
1042
|
return "".concat(identifier).concat(name ? "-".concat(name) : '');
|
|
1032
1043
|
}
|
|
1044
|
+
function transformPlacement$1(placement) {
|
|
1045
|
+
if (placement === 'left') {
|
|
1046
|
+
return I18nManager.isRTL ? 'end' : 'start';
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
if (placement === 'right') {
|
|
1050
|
+
return I18nManager.isRTL ? 'start' : 'end';
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
return placement;
|
|
1054
|
+
}
|
|
1033
1055
|
function convertToREM(value) {
|
|
1034
1056
|
return value.replace(/([+-]+)?([\d.Ee]+)px/, function (_, unary, number) {
|
|
1035
1057
|
return "".concat(unary || '').concat(number / (PixelRatio.getFontScale() * 16), "rem");
|
|
@@ -1873,13 +1895,13 @@ var utilities = {
|
|
|
1873
1895
|
|
|
1874
1896
|
};
|
|
1875
1897
|
|
|
1876
|
-
var _templateObject$
|
|
1898
|
+
var _templateObject$13, _templateObject2$I;
|
|
1877
1899
|
function makeUtility(options) {
|
|
1878
1900
|
return each(options.values, function (key, value) {
|
|
1879
1901
|
var name = options.class || options.property;
|
|
1880
1902
|
var suffix = key === 'null' ? '' : "-".concat(key);
|
|
1881
1903
|
|
|
1882
|
-
var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$
|
|
1904
|
+
var styles = _defineProperty({}, "".concat(name).concat(suffix), css(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteral(["\n ", ": ", ";\n "])), options.property, value));
|
|
1883
1905
|
|
|
1884
1906
|
if (!options.responsive) {
|
|
1885
1907
|
return styles;
|
|
@@ -1890,7 +1912,7 @@ function makeUtility(options) {
|
|
|
1890
1912
|
return null;
|
|
1891
1913
|
}
|
|
1892
1914
|
|
|
1893
|
-
return _defineProperty({}, "".concat(name, "-").concat(breakpoint).concat(suffix), css(_templateObject2$
|
|
1915
|
+
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));
|
|
1894
1916
|
}));
|
|
1895
1917
|
});
|
|
1896
1918
|
}
|
|
@@ -1994,7 +2016,7 @@ function subtract(value1, value2) {
|
|
|
1994
2016
|
// TODO
|
|
1995
2017
|
} */
|
|
1996
2018
|
|
|
1997
|
-
var _templateObject
|
|
2019
|
+
var _templateObject$12;
|
|
1998
2020
|
// Also all elements have tabIndex={-1} until the following is merged:
|
|
1999
2021
|
// https://github.com/react-native-svg/react-native-svg/pull/1585
|
|
2000
2022
|
|
|
@@ -2152,7 +2174,7 @@ var svgs = {
|
|
|
2152
2174
|
}));
|
|
2153
2175
|
}
|
|
2154
2176
|
};
|
|
2155
|
-
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) {
|
|
2177
|
+
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) {
|
|
2156
2178
|
return {
|
|
2157
2179
|
100: t['gray-100'],
|
|
2158
2180
|
200: t['gray-200'],
|
|
@@ -2611,7 +2633,7 @@ function useViewport(initialViewport) {
|
|
|
2611
2633
|
return viewport;
|
|
2612
2634
|
}
|
|
2613
2635
|
|
|
2614
|
-
var propTypes$
|
|
2636
|
+
var propTypes$1i = {
|
|
2615
2637
|
children: PropTypes.node.isRequired,
|
|
2616
2638
|
// eslint-disable-next-line react/forbid-prop-types,
|
|
2617
2639
|
utilities: PropTypes.object,
|
|
@@ -2645,12 +2667,12 @@ function Provider(props) {
|
|
|
2645
2667
|
}, /*#__PURE__*/React.createElement(OverlayProvider, null, children));
|
|
2646
2668
|
}
|
|
2647
2669
|
|
|
2648
|
-
Provider.propTypes = propTypes$
|
|
2670
|
+
Provider.propTypes = propTypes$1i;
|
|
2649
2671
|
|
|
2650
2672
|
var TextStyleContext = /*#__PURE__*/React.createContext();
|
|
2651
2673
|
TextStyleContext.displayName = 'TextStyleContext';
|
|
2652
2674
|
|
|
2653
|
-
var propTypes$
|
|
2675
|
+
var propTypes$1h = {
|
|
2654
2676
|
children: PropTypes.node,
|
|
2655
2677
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2656
2678
|
style: PropTypes.any
|
|
@@ -2668,7 +2690,7 @@ function TextStyleProvider(props) {
|
|
|
2668
2690
|
}, children);
|
|
2669
2691
|
}
|
|
2670
2692
|
|
|
2671
|
-
TextStyleProvider.propTypes = propTypes$
|
|
2693
|
+
TextStyleProvider.propTypes = propTypes$1h;
|
|
2672
2694
|
|
|
2673
2695
|
function useMedia() {
|
|
2674
2696
|
var context = useContext(Context);
|
|
@@ -2748,8 +2770,8 @@ function useStyle(style, styleName) {
|
|
|
2748
2770
|
};
|
|
2749
2771
|
}
|
|
2750
2772
|
|
|
2751
|
-
var _excluded$
|
|
2752
|
-
var propTypes$
|
|
2773
|
+
var _excluded$1j = ["style", "styleName"];
|
|
2774
|
+
var propTypes$1g = {
|
|
2753
2775
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2754
2776
|
style: PropTypes.any,
|
|
2755
2777
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -2758,7 +2780,7 @@ var propTypes$1d = {
|
|
|
2758
2780
|
var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
2759
2781
|
var style = props.style,
|
|
2760
2782
|
styleName = props.styleName,
|
|
2761
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2783
|
+
elementProps = _objectWithoutProperties(props, _excluded$1j);
|
|
2762
2784
|
|
|
2763
2785
|
var media = useMedia();
|
|
2764
2786
|
var resolveStyle = useStyle(style, styleName);
|
|
@@ -2770,28 +2792,28 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2770
2792
|
}));
|
|
2771
2793
|
});
|
|
2772
2794
|
View.displayName = 'View';
|
|
2773
|
-
View.propTypes = propTypes$
|
|
2795
|
+
View.propTypes = propTypes$1g;
|
|
2774
2796
|
|
|
2775
|
-
var _excluded$
|
|
2797
|
+
var _excluded$1i = ["children", "color", "dismissible", "style"];
|
|
2776
2798
|
|
|
2777
|
-
var _templateObject$
|
|
2778
|
-
var propTypes$
|
|
2799
|
+
var _templateObject$11, _templateObject2$H, _templateObject3$m;
|
|
2800
|
+
var propTypes$1f = {
|
|
2779
2801
|
children: PropTypes.node.isRequired,
|
|
2780
2802
|
color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
|
|
2781
2803
|
dismissible: PropTypes.bool,
|
|
2782
2804
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2783
2805
|
style: PropTypes.any
|
|
2784
2806
|
};
|
|
2785
|
-
var styles$
|
|
2786
|
-
'.alert': css(_templateObject$
|
|
2807
|
+
var styles$10 = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
2808
|
+
'.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 "])))
|
|
2787
2809
|
}, each(THEME_COLORS, function (state, value) {
|
|
2788
2810
|
var _ref;
|
|
2789
2811
|
|
|
2790
|
-
return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$
|
|
2812
|
+
return _ref = {}, _defineProperty(_ref, ".alert-".concat(state), css(_templateObject2$H || (_templateObject2$H = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), function (t) {
|
|
2791
2813
|
return shiftColor(t['alert-bg-scale'], value(t));
|
|
2792
2814
|
}, function (t) {
|
|
2793
2815
|
return shiftColor(t['alert-border-scale'], value(t));
|
|
2794
|
-
})), _defineProperty(_ref, ".alert-".concat(state, "-text"), css(_templateObject3$
|
|
2816
|
+
})), _defineProperty(_ref, ".alert-".concat(state, "-text"), css(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
2795
2817
|
return shiftColor(t['alert-color-scale'], value(t));
|
|
2796
2818
|
})), _ref;
|
|
2797
2819
|
})), {}, {
|
|
@@ -2805,10 +2827,10 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2805
2827
|
_props$dismissible = props.dismissible,
|
|
2806
2828
|
dismissible = _props$dismissible === void 0 ? false : _props$dismissible,
|
|
2807
2829
|
style = props.style,
|
|
2808
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2830
|
+
elementProps = _objectWithoutProperties(props, _excluded$1i);
|
|
2809
2831
|
|
|
2810
|
-
var classes = getStyles(styles$
|
|
2811
|
-
var textClasses = getStyles(styles$
|
|
2832
|
+
var classes = getStyles(styles$10, ['.alert', ".alert-".concat(color), dismissible && '.alert-dismissible']);
|
|
2833
|
+
var textClasses = getStyles(styles$10, [".alert-".concat(color, "-text")]);
|
|
2812
2834
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
2813
2835
|
ref: ref,
|
|
2814
2836
|
accessibilityRole: "alert",
|
|
@@ -2818,13 +2840,13 @@ var Alert = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2818
2840
|
}, children));
|
|
2819
2841
|
});
|
|
2820
2842
|
Alert.displayName = 'Alert';
|
|
2821
|
-
Alert.propTypes = propTypes$
|
|
2843
|
+
Alert.propTypes = propTypes$1f;
|
|
2822
2844
|
|
|
2823
|
-
var _excluded$
|
|
2845
|
+
var _excluded$1h = ["color", "bold", "italic", "mark", "small", "style", "styleName"];
|
|
2824
2846
|
|
|
2825
|
-
var _templateObject$
|
|
2826
|
-
var propTypes$
|
|
2827
|
-
color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
|
|
2847
|
+
var _templateObject$10, _templateObject2$G, _templateObject3$l, _templateObject4$i, _templateObject5$g;
|
|
2848
|
+
var propTypes$1e = {
|
|
2849
|
+
color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['muted', 'black-50', 'white-50'])),
|
|
2828
2850
|
small: PropTypes.bool,
|
|
2829
2851
|
mark: PropTypes.bool,
|
|
2830
2852
|
bold: PropTypes.bool,
|
|
@@ -2834,12 +2856,12 @@ var propTypes$1b = {
|
|
|
2834
2856
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2835
2857
|
styleName: PropTypes.any
|
|
2836
2858
|
};
|
|
2837
|
-
var styles
|
|
2838
|
-
text: css(_templateObject$
|
|
2839
|
-
strong: css(_templateObject2$
|
|
2840
|
-
italic: css(_templateObject3$
|
|
2841
|
-
small: css(_templateObject4$
|
|
2842
|
-
mark: css(_templateObject5$
|
|
2859
|
+
var styles$$ = StyleSheet.create({
|
|
2860
|
+
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 "]))),
|
|
2861
|
+
strong: css(_templateObject2$G || (_templateObject2$G = _taggedTemplateLiteral(["\n font-weight: $font-weight-bolder;\n "]))),
|
|
2862
|
+
italic: css(_templateObject3$l || (_templateObject3$l = _taggedTemplateLiteral(["\n font-style: italic;\n "]))),
|
|
2863
|
+
small: css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteral(["\n font-size: $small-font-size;\n line-height: $small-font-size * $line-height-base;\n "]))),
|
|
2864
|
+
mark: css(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteral(["\n padding: $mark-padding;\n background-color: $mark-bg;\n "])))
|
|
2843
2865
|
});
|
|
2844
2866
|
|
|
2845
2867
|
var getStyleName$1 = function getStyleName(styleName, color) {
|
|
@@ -2862,13 +2884,13 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2862
2884
|
small = _props$small === void 0 ? false : _props$small,
|
|
2863
2885
|
style = props.style,
|
|
2864
2886
|
styleName = props.styleName,
|
|
2865
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2887
|
+
elementProps = _objectWithoutProperties(props, _excluded$1h);
|
|
2866
2888
|
|
|
2867
2889
|
var media = useMedia();
|
|
2868
2890
|
var context = useContext(TextStyleContext);
|
|
2869
|
-
var classes = getStyles(styles
|
|
2891
|
+
var classes = getStyles(styles$$, [bold && 'strong', italic && 'italic', small && 'small', mark && 'mark']);
|
|
2870
2892
|
var resolveStyle = useStyle([// eslint-disable-next-line react/destructuring-assignment
|
|
2871
|
-
(!context || !context.hasTextAncestor) && styles
|
|
2893
|
+
(!context || !context.hasTextAncestor) && styles$$.text, // eslint-disable-next-line react/destructuring-assignment
|
|
2872
2894
|
context && context.style, classes, style], getStyleName$1(styleName, color));
|
|
2873
2895
|
var element = /*#__PURE__*/React.createElement(Text$1, _extends({}, elementProps, {
|
|
2874
2896
|
ref: ref,
|
|
@@ -2892,12 +2914,12 @@ var Text = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2892
2914
|
}, element);
|
|
2893
2915
|
});
|
|
2894
2916
|
Text.displayName = 'Text';
|
|
2895
|
-
Text.propTypes = propTypes$
|
|
2917
|
+
Text.propTypes = propTypes$1e;
|
|
2896
2918
|
|
|
2897
|
-
var _excluded$
|
|
2919
|
+
var _excluded$1g = ["children", "color", "style", "styleName"];
|
|
2898
2920
|
|
|
2899
|
-
var _templateObject
|
|
2900
|
-
var propTypes$
|
|
2921
|
+
var _templateObject$$, _templateObject2$F;
|
|
2922
|
+
var propTypes$1d = {
|
|
2901
2923
|
children: PropTypes.node.isRequired,
|
|
2902
2924
|
color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
|
|
2903
2925
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -2905,9 +2927,9 @@ var propTypes$1a = {
|
|
|
2905
2927
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2906
2928
|
styleName: PropTypes.any
|
|
2907
2929
|
};
|
|
2908
|
-
var styles$
|
|
2909
|
-
'.badge': css(_templateObject
|
|
2910
|
-
'.badge-text': css(_templateObject2$
|
|
2930
|
+
var styles$_ = StyleSheet.create({
|
|
2931
|
+
'.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 "]))),
|
|
2932
|
+
'.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 "])))
|
|
2911
2933
|
});
|
|
2912
2934
|
|
|
2913
2935
|
var getStyleName = function getStyleName(styleName, color) {
|
|
@@ -2923,10 +2945,10 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2923
2945
|
color = props.color,
|
|
2924
2946
|
style = props.style,
|
|
2925
2947
|
styleName = props.styleName,
|
|
2926
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2948
|
+
elementProps = _objectWithoutProperties(props, _excluded$1g);
|
|
2927
2949
|
|
|
2928
|
-
var classes = getStyles(styles$
|
|
2929
|
-
var textClasses = getStyles(styles$
|
|
2950
|
+
var classes = getStyles(styles$_, ['.badge']);
|
|
2951
|
+
var textClasses = getStyles(styles$_, ['.badge-text']);
|
|
2930
2952
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
2931
2953
|
ref: ref,
|
|
2932
2954
|
style: [classes, style],
|
|
@@ -2936,30 +2958,30 @@ var Badge = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2936
2958
|
}, /*#__PURE__*/React.createElement(Text, null, children)));
|
|
2937
2959
|
});
|
|
2938
2960
|
Badge.displayName = 'Badge';
|
|
2939
|
-
Badge.propTypes = propTypes$
|
|
2961
|
+
Badge.propTypes = propTypes$1d;
|
|
2940
2962
|
|
|
2941
2963
|
var ButtonGroupContext = /*#__PURE__*/React.createContext();
|
|
2942
2964
|
ButtonGroupContext.displayName = 'ButtonGroupContext';
|
|
2943
2965
|
|
|
2944
|
-
var _excluded$
|
|
2966
|
+
var _excluded$1f = ["children", "size", "style"];
|
|
2945
2967
|
|
|
2946
|
-
var _templateObject$
|
|
2947
|
-
var propTypes$
|
|
2968
|
+
var _templateObject$_;
|
|
2969
|
+
var propTypes$1c = {
|
|
2948
2970
|
children: PropTypes.node.isRequired,
|
|
2949
2971
|
size: PropTypes.oneOf(['lg', 'sm']),
|
|
2950
2972
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2951
2973
|
style: PropTypes.any
|
|
2952
2974
|
};
|
|
2953
|
-
var styles$
|
|
2954
|
-
'.btn-group': css(_templateObject$
|
|
2975
|
+
var styles$Z = StyleSheet.create({
|
|
2976
|
+
'.btn-group': css(_templateObject$_ || (_templateObject$_ = _taggedTemplateLiteral(["\n flex-direction: row; // added for bootstrap-rn\n border-radius: $btn-border-radius;\n "])))
|
|
2955
2977
|
});
|
|
2956
2978
|
var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
2957
2979
|
var children = props.children,
|
|
2958
2980
|
size = props.size,
|
|
2959
2981
|
style = props.style,
|
|
2960
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
2982
|
+
elementProps = _objectWithoutProperties(props, _excluded$1f);
|
|
2961
2983
|
|
|
2962
|
-
var classes = getStyles(styles$
|
|
2984
|
+
var classes = getStyles(styles$Z, ['.btn-group']); // Accessiblity role tabpanel is only supported on web.
|
|
2963
2985
|
|
|
2964
2986
|
var role = Platform.OS === 'web' ? 'group' : null;
|
|
2965
2987
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
@@ -2973,25 +2995,25 @@ var ButtonGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2973
2995
|
}, makeListChildren(children)));
|
|
2974
2996
|
});
|
|
2975
2997
|
ButtonGroup.displayName = 'ButtonGroup';
|
|
2976
|
-
ButtonGroup.propTypes = propTypes$
|
|
2998
|
+
ButtonGroup.propTypes = propTypes$1c;
|
|
2977
2999
|
|
|
2978
|
-
var _excluded$
|
|
3000
|
+
var _excluded$1e = ["children", "style"];
|
|
2979
3001
|
|
|
2980
|
-
var _templateObject$
|
|
2981
|
-
var propTypes$
|
|
3002
|
+
var _templateObject$Z;
|
|
3003
|
+
var propTypes$1b = {
|
|
2982
3004
|
children: PropTypes.node.isRequired,
|
|
2983
3005
|
// eslint-disable-next-line react/forbid-prop-types
|
|
2984
3006
|
style: PropTypes.any
|
|
2985
3007
|
};
|
|
2986
|
-
var styles$
|
|
2987
|
-
'.btn-toolbar': css(_templateObject$
|
|
3008
|
+
var styles$Y = StyleSheet.create({
|
|
3009
|
+
'.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 "])))
|
|
2988
3010
|
});
|
|
2989
3011
|
var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
2990
3012
|
var children = props.children,
|
|
2991
3013
|
style = props.style,
|
|
2992
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3014
|
+
elementProps = _objectWithoutProperties(props, _excluded$1e);
|
|
2993
3015
|
|
|
2994
|
-
var classes = getStyles(styles$
|
|
3016
|
+
var classes = getStyles(styles$Y, ['.btn-toolbar']);
|
|
2995
3017
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
2996
3018
|
ref: ref,
|
|
2997
3019
|
accessibilityRole: "toolbar",
|
|
@@ -2999,7 +3021,7 @@ var ButtonToolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
2999
3021
|
}), children);
|
|
3000
3022
|
});
|
|
3001
3023
|
ButtonToolbar.displayName = 'ButtonToolbar';
|
|
3002
|
-
ButtonToolbar.propTypes = propTypes$
|
|
3024
|
+
ButtonToolbar.propTypes = propTypes$1b;
|
|
3003
3025
|
|
|
3004
3026
|
function useForcedContext(Context) {
|
|
3005
3027
|
var context = useContext(Context);
|
|
@@ -3007,7 +3029,7 @@ function useForcedContext(Context) {
|
|
|
3007
3029
|
return context;
|
|
3008
3030
|
}
|
|
3009
3031
|
|
|
3010
|
-
var _excluded$
|
|
3032
|
+
var _excluded$1d = ["ref"];
|
|
3011
3033
|
function useModifier(name, props, ref) {
|
|
3012
3034
|
var context = useForcedContext(Context);
|
|
3013
3035
|
var useModifierHook = context.modifiers[name];
|
|
@@ -3018,13 +3040,13 @@ function useModifier(name, props, ref) {
|
|
|
3018
3040
|
|
|
3019
3041
|
var _useModifierHook = useModifierHook(props),
|
|
3020
3042
|
modifierRef = _useModifierHook.ref,
|
|
3021
|
-
modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$
|
|
3043
|
+
modifierProps = _objectWithoutProperties(_useModifierHook, _excluded$1d);
|
|
3022
3044
|
|
|
3023
3045
|
return [modifierProps, concatRefs(modifierRef, ref)];
|
|
3024
3046
|
}
|
|
3025
3047
|
|
|
3026
|
-
var _excluded$
|
|
3027
|
-
_excluded2 = ["ref"];
|
|
3048
|
+
var _excluded$1c = ["toggle", "dismiss"],
|
|
3049
|
+
_excluded2$2 = ["ref"];
|
|
3028
3050
|
|
|
3029
3051
|
var getActionHook = function getActionHook(toggle, dismiss) {
|
|
3030
3052
|
if (toggle) {
|
|
@@ -3041,7 +3063,7 @@ var getActionHook = function getActionHook(toggle, dismiss) {
|
|
|
3041
3063
|
function useAction(props, ref) {
|
|
3042
3064
|
var toggle = props.toggle,
|
|
3043
3065
|
dismiss = props.dismiss,
|
|
3044
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3066
|
+
restProps = _objectWithoutProperties(props, _excluded$1c);
|
|
3045
3067
|
|
|
3046
3068
|
var useActionHook = getActionHook(toggle, dismiss);
|
|
3047
3069
|
|
|
@@ -3051,13 +3073,13 @@ function useAction(props, ref) {
|
|
|
3051
3073
|
|
|
3052
3074
|
var _useActionHook = useActionHook(restProps),
|
|
3053
3075
|
actionRef = _useActionHook.ref,
|
|
3054
|
-
actionProps = _objectWithoutProperties(_useActionHook, _excluded2);
|
|
3076
|
+
actionProps = _objectWithoutProperties(_useActionHook, _excluded2$2);
|
|
3055
3077
|
|
|
3056
3078
|
return [actionProps, concatRefs(actionRef, ref)];
|
|
3057
3079
|
}
|
|
3058
3080
|
|
|
3059
|
-
var _excluded$
|
|
3060
|
-
var propTypes$
|
|
3081
|
+
var _excluded$1b = ["children", "active", "style", "activeStyle", "textStyle", "activeTextStyle", "styleName"];
|
|
3082
|
+
var propTypes$1a = {
|
|
3061
3083
|
children: PropTypes.node,
|
|
3062
3084
|
active: PropTypes.bool,
|
|
3063
3085
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -3109,7 +3131,7 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3109
3131
|
textStyle = actionProps.textStyle,
|
|
3110
3132
|
activeTextStyle = actionProps.activeTextStyle,
|
|
3111
3133
|
styleName = actionProps.styleName,
|
|
3112
|
-
elementProps = _objectWithoutProperties(actionProps, _excluded$
|
|
3134
|
+
elementProps = _objectWithoutProperties(actionProps, _excluded$1b);
|
|
3113
3135
|
|
|
3114
3136
|
var media = useMedia();
|
|
3115
3137
|
var resolveStyle = useStyle(style, styleName);
|
|
@@ -3146,13 +3168,13 @@ var Pressable = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3146
3168
|
} : children);
|
|
3147
3169
|
});
|
|
3148
3170
|
Pressable.displayName = 'Pressable';
|
|
3149
|
-
Pressable.propTypes = propTypes$
|
|
3171
|
+
Pressable.propTypes = propTypes$1a;
|
|
3150
3172
|
|
|
3151
|
-
var _excluded$
|
|
3173
|
+
var _excluded$1a = ["active", "handlePress"];
|
|
3152
3174
|
function useToggleButton(props) {
|
|
3153
3175
|
var active = props.active,
|
|
3154
3176
|
handlePress = props.handlePress,
|
|
3155
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3177
|
+
restProps = _objectWithoutProperties(props, _excluded$1a);
|
|
3156
3178
|
|
|
3157
3179
|
var _useState = useState(active),
|
|
3158
3180
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -3171,10 +3193,10 @@ function useToggleButton(props) {
|
|
|
3171
3193
|
});
|
|
3172
3194
|
}
|
|
3173
3195
|
|
|
3174
|
-
var _excluded$
|
|
3196
|
+
var _excluded$19 = ["children", "color", "size", "outline", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
3175
3197
|
|
|
3176
|
-
var _templateObject$
|
|
3177
|
-
var propTypes$
|
|
3198
|
+
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;
|
|
3199
|
+
var propTypes$19 = {
|
|
3178
3200
|
children: PropTypes.node.isRequired,
|
|
3179
3201
|
color: PropTypes.oneOf([].concat(_toConsumableArray(Object.keys(THEME_COLORS)), ['link'])),
|
|
3180
3202
|
size: PropTypes.oneOf(['lg', 'sm']),
|
|
@@ -3192,14 +3214,14 @@ var propTypes$16 = {
|
|
|
3192
3214
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3193
3215
|
activeTextStyle: PropTypes.any
|
|
3194
3216
|
};
|
|
3195
|
-
var styles$
|
|
3196
|
-
'.btn': css(_templateObject$
|
|
3197
|
-
'.btn-text': css(_templateObject2$
|
|
3198
|
-
'.btn-disabled': css(_templateObject3$
|
|
3217
|
+
var styles$X = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
3218
|
+
'.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 "]))),
|
|
3219
|
+
'.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 "]))),
|
|
3220
|
+
'.btn-disabled': css(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteral(["\n // pointer-events: none;\n opacity: $btn-disabled-opacity;\n // @include box-shadow(none);\n "])))
|
|
3199
3221
|
}, each(THEME_COLORS, function (color, value) {
|
|
3200
3222
|
var _ref;
|
|
3201
3223
|
|
|
3202
|
-
return _ref = {}, _defineProperty(_ref, ".btn-".concat(color), css(_templateObject4$
|
|
3224
|
+
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) {
|
|
3203
3225
|
return shadeColor(t['btn-hover-bg-shade-amount'], value(t));
|
|
3204
3226
|
}, function (t) {
|
|
3205
3227
|
return shadeColor(t['btn-hover-border-shade-amount'], value(t));
|
|
@@ -3211,7 +3233,7 @@ var styles$U = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
|
3211
3233
|
return shadeColor(t['btn-active-bg-shade-amount'], value(t));
|
|
3212
3234
|
}, function (t) {
|
|
3213
3235
|
return shadeColor(t['btn-active-border-shade-amount'], value(t));
|
|
3214
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-text"), css(_templateObject5$
|
|
3236
|
+
})), _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) {
|
|
3215
3237
|
return colorContrast(value(t));
|
|
3216
3238
|
}, function (t) {
|
|
3217
3239
|
return colorContrast(value(t));
|
|
@@ -3219,22 +3241,22 @@ var styles$U = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
|
3219
3241
|
return colorContrast(value(t));
|
|
3220
3242
|
}, function (t) {
|
|
3221
3243
|
return colorContrast(value(t));
|
|
3222
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-active"), css(_templateObject6$
|
|
3244
|
+
})), _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) {
|
|
3223
3245
|
return shadeColor(t['btn-active-bg-shade-amount'], value(t));
|
|
3224
3246
|
}, function (t) {
|
|
3225
3247
|
return shadeColor(t['btn-active-border-shade-amount'], value(t));
|
|
3226
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$
|
|
3248
|
+
})), _defineProperty(_ref, ".btn-".concat(color, "-active-text"), css(_templateObject7$b || (_templateObject7$b = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
3227
3249
|
return colorContrast(value(t));
|
|
3228
|
-
})), _defineProperty(_ref, ".btn-".concat(color, "-disabled"), css(_templateObject8$
|
|
3250
|
+
})), _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) {
|
|
3229
3251
|
return colorContrast(value(t));
|
|
3230
|
-
})), _defineProperty(_ref, ".btn-outline-".concat(color), css(_templateObject10$
|
|
3252
|
+
})), _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) {
|
|
3231
3253
|
return colorContrast(value(t));
|
|
3232
3254
|
}, function (t) {
|
|
3233
3255
|
return colorContrast(value(t));
|
|
3234
|
-
})), _defineProperty(_ref, ".btn-outline-".concat(color, "-disabled"), css(_templateObject12$
|
|
3256
|
+
})), _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;
|
|
3235
3257
|
})), {}, {
|
|
3236
|
-
'.btn-link-text': css(_templateObject14$
|
|
3237
|
-
'.btn-link-text-disabled': css(_templateObject15$
|
|
3258
|
+
'.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 "]))),
|
|
3259
|
+
'.btn-link-text-disabled': css(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteral(["\n color: $btn-link-disabled-color;\n "]))),
|
|
3238
3260
|
'.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 "]))),
|
|
3239
3261
|
'.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 "]))),
|
|
3240
3262
|
'.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 "]))),
|
|
@@ -3284,14 +3306,14 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3284
3306
|
activeStyle = props.activeStyle,
|
|
3285
3307
|
textStyle = props.textStyle,
|
|
3286
3308
|
activeTextStyle = props.activeTextStyle,
|
|
3287
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3309
|
+
elementProps = _objectWithoutProperties(props, _excluded$19);
|
|
3288
3310
|
|
|
3289
3311
|
invariant(color !== 'link' || !outline, 'Button link variant is only available as non outline style.');
|
|
3290
3312
|
var group = useContext(ButtonGroupContext);
|
|
3291
|
-
var classes = getStyles(styles$
|
|
3292
|
-
var activeClasses = getStyles(styles$
|
|
3293
|
-
var textClasses = getStyles(styles$
|
|
3294
|
-
var activeTextClasses = getStyles(styles$
|
|
3313
|
+
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']);
|
|
3314
|
+
var activeClasses = getStyles(styles$X, ["".concat(getVariant(color, outline), "-active")]);
|
|
3315
|
+
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']);
|
|
3316
|
+
var activeTextClasses = getStyles(styles$X, ["".concat(getVariant(color, outline), "-active-text")]);
|
|
3295
3317
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
3296
3318
|
ref: ref,
|
|
3297
3319
|
active: active,
|
|
@@ -3303,28 +3325,28 @@ var Button = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3303
3325
|
}), children);
|
|
3304
3326
|
});
|
|
3305
3327
|
Button.displayName = 'Button';
|
|
3306
|
-
Button.propTypes = propTypes$
|
|
3328
|
+
Button.propTypes = propTypes$19;
|
|
3307
3329
|
Button.useToggle = useToggleButton;
|
|
3308
3330
|
|
|
3309
|
-
var _excluded$
|
|
3331
|
+
var _excluded$18 = ["children", "style"];
|
|
3310
3332
|
|
|
3311
|
-
var _templateObject$
|
|
3312
|
-
var propTypes$
|
|
3333
|
+
var _templateObject$X, _templateObject2$D;
|
|
3334
|
+
var propTypes$18 = {
|
|
3313
3335
|
children: PropTypes.node.isRequired,
|
|
3314
3336
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3315
3337
|
style: PropTypes.any
|
|
3316
3338
|
};
|
|
3317
|
-
var styles$
|
|
3318
|
-
'.card-body': css(_templateObject$
|
|
3319
|
-
'.card-body-text': css(_templateObject2$
|
|
3339
|
+
var styles$W = StyleSheet.create({
|
|
3340
|
+
'.card-body': css(_templateObject$X || (_templateObject$X = _taggedTemplateLiteral(["\n // flex: 1 1 auto;\n padding: $card-spacer-y $card-spacer-x;\n "]))),
|
|
3341
|
+
'.card-body-text': css(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteral(["\n color: $card-color;\n "])))
|
|
3320
3342
|
});
|
|
3321
3343
|
var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3322
3344
|
var children = props.children,
|
|
3323
3345
|
style = props.style,
|
|
3324
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3346
|
+
elementProps = _objectWithoutProperties(props, _excluded$18);
|
|
3325
3347
|
|
|
3326
|
-
var classes = getStyles(styles$
|
|
3327
|
-
var textClasses = getStyles(styles$
|
|
3348
|
+
var classes = getStyles(styles$W, ['.card-body']);
|
|
3349
|
+
var textClasses = getStyles(styles$W, [".card-body-text"]);
|
|
3328
3350
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3329
3351
|
ref: ref,
|
|
3330
3352
|
style: [classes, style]
|
|
@@ -3333,27 +3355,27 @@ var CardBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3333
3355
|
}, children));
|
|
3334
3356
|
});
|
|
3335
3357
|
CardBody.displayName = 'CardBody';
|
|
3336
|
-
CardBody.propTypes = propTypes$
|
|
3358
|
+
CardBody.propTypes = propTypes$18;
|
|
3337
3359
|
|
|
3338
|
-
var _excluded$
|
|
3360
|
+
var _excluded$17 = ["children", "style"];
|
|
3339
3361
|
|
|
3340
|
-
var _templateObject$
|
|
3341
|
-
var propTypes$
|
|
3362
|
+
var _templateObject$W, _templateObject2$C;
|
|
3363
|
+
var propTypes$17 = {
|
|
3342
3364
|
children: PropTypes.node.isRequired,
|
|
3343
3365
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3344
3366
|
style: PropTypes.any
|
|
3345
3367
|
};
|
|
3346
|
-
var styles$
|
|
3347
|
-
'.card-header': css(_templateObject$
|
|
3348
|
-
'.card-header-text': css(_templateObject2$
|
|
3368
|
+
var styles$V = StyleSheet.create({
|
|
3369
|
+
'.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 "]))),
|
|
3370
|
+
'.card-header-text': css(_templateObject2$C || (_templateObject2$C = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
|
|
3349
3371
|
});
|
|
3350
3372
|
var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3351
3373
|
var children = props.children,
|
|
3352
3374
|
style = props.style,
|
|
3353
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3375
|
+
elementProps = _objectWithoutProperties(props, _excluded$17);
|
|
3354
3376
|
|
|
3355
|
-
var classes = getStyles(styles$
|
|
3356
|
-
var textClasses = getStyles(styles$
|
|
3377
|
+
var classes = getStyles(styles$V, ['.card-header']);
|
|
3378
|
+
var textClasses = getStyles(styles$V, ['.card-header-text']);
|
|
3357
3379
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3358
3380
|
ref: ref,
|
|
3359
3381
|
style: [classes, style]
|
|
@@ -3362,27 +3384,27 @@ var CardHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3362
3384
|
}, children));
|
|
3363
3385
|
});
|
|
3364
3386
|
CardHeader.displayName = 'CardHeader';
|
|
3365
|
-
CardHeader.propTypes = propTypes$
|
|
3387
|
+
CardHeader.propTypes = propTypes$17;
|
|
3366
3388
|
|
|
3367
|
-
var _excluded$
|
|
3389
|
+
var _excluded$16 = ["children", "style"];
|
|
3368
3390
|
|
|
3369
|
-
var _templateObject$
|
|
3370
|
-
var propTypes$
|
|
3391
|
+
var _templateObject$V, _templateObject2$B;
|
|
3392
|
+
var propTypes$16 = {
|
|
3371
3393
|
children: PropTypes.node.isRequired,
|
|
3372
3394
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3373
3395
|
style: PropTypes.any
|
|
3374
3396
|
};
|
|
3375
|
-
var styles$
|
|
3376
|
-
'.card-footer': css(_templateObject$
|
|
3377
|
-
'.card-footer-text': css(_templateObject2$
|
|
3397
|
+
var styles$U = StyleSheet.create({
|
|
3398
|
+
'.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 "]))),
|
|
3399
|
+
'.card-footer-text': css(_templateObject2$B || (_templateObject2$B = _taggedTemplateLiteral(["\n color: $card-cap-color;\n "])))
|
|
3378
3400
|
});
|
|
3379
3401
|
var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3380
3402
|
var children = props.children,
|
|
3381
3403
|
style = props.style,
|
|
3382
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3404
|
+
elementProps = _objectWithoutProperties(props, _excluded$16);
|
|
3383
3405
|
|
|
3384
|
-
var classes = getStyles(styles$
|
|
3385
|
-
var textClasses = getStyles(styles$
|
|
3406
|
+
var classes = getStyles(styles$U, ['.card-footer']);
|
|
3407
|
+
var textClasses = getStyles(styles$U, ['.card-footer-text']);
|
|
3386
3408
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3387
3409
|
ref: ref,
|
|
3388
3410
|
style: [classes, style]
|
|
@@ -3391,40 +3413,40 @@ var CardFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3391
3413
|
}, children));
|
|
3392
3414
|
});
|
|
3393
3415
|
CardFooter.displayName = 'CardFooter';
|
|
3394
|
-
CardFooter.propTypes = propTypes$
|
|
3416
|
+
CardFooter.propTypes = propTypes$16;
|
|
3395
3417
|
|
|
3396
|
-
var _excluded$
|
|
3418
|
+
var _excluded$15 = ["children", "style"];
|
|
3397
3419
|
|
|
3398
|
-
var _templateObject$
|
|
3399
|
-
var propTypes$
|
|
3420
|
+
var _templateObject$U;
|
|
3421
|
+
var propTypes$15 = {
|
|
3400
3422
|
children: PropTypes.node.isRequired,
|
|
3401
3423
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3402
3424
|
style: PropTypes.any
|
|
3403
3425
|
};
|
|
3404
|
-
var styles$
|
|
3405
|
-
'.card': css(_templateObject$
|
|
3426
|
+
var styles$T = StyleSheet.create({
|
|
3427
|
+
'.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 "])))
|
|
3406
3428
|
});
|
|
3407
3429
|
var Card = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3408
3430
|
var children = props.children,
|
|
3409
3431
|
style = props.style,
|
|
3410
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3432
|
+
elementProps = _objectWithoutProperties(props, _excluded$15);
|
|
3411
3433
|
|
|
3412
|
-
var classes = getStyles(styles$
|
|
3434
|
+
var classes = getStyles(styles$T, ['.card']);
|
|
3413
3435
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3414
3436
|
ref: ref,
|
|
3415
3437
|
style: [classes, style]
|
|
3416
3438
|
}), children);
|
|
3417
3439
|
});
|
|
3418
3440
|
Card.displayName = 'Card';
|
|
3419
|
-
Card.propTypes = propTypes$
|
|
3441
|
+
Card.propTypes = propTypes$15;
|
|
3420
3442
|
Card.Header = CardHeader;
|
|
3421
3443
|
Card.Body = CardBody;
|
|
3422
3444
|
Card.Footer = CardFooter;
|
|
3423
3445
|
|
|
3424
|
-
var _excluded$
|
|
3446
|
+
var _excluded$14 = ["children", "disabled", "style", "textStyle"];
|
|
3425
3447
|
|
|
3426
|
-
var _templateObject$
|
|
3427
|
-
var propTypes$
|
|
3448
|
+
var _templateObject$T, _templateObject2$A, _templateObject3$j;
|
|
3449
|
+
var propTypes$14 = {
|
|
3428
3450
|
children: PropTypes.node,
|
|
3429
3451
|
disabled: PropTypes.bool,
|
|
3430
3452
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -3432,10 +3454,10 @@ var propTypes$11 = {
|
|
|
3432
3454
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3433
3455
|
textStyle: PropTypes.any
|
|
3434
3456
|
};
|
|
3435
|
-
var styles$
|
|
3436
|
-
'.btn-close': css(_templateObject$
|
|
3437
|
-
'.btn-close-text': css(_templateObject2$
|
|
3438
|
-
'.btn-close-disabled': css(_templateObject3$
|
|
3457
|
+
var styles$S = StyleSheet.create({
|
|
3458
|
+
'.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 "]))),
|
|
3459
|
+
'.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 "]))),
|
|
3460
|
+
'.btn-close-disabled': css(_templateObject3$j || (_templateObject3$j = _taggedTemplateLiteral(["\n // pointer-events: none;\n // user-select: none;\n opacity: $btn-close-disabled-opacity;\n "])))
|
|
3439
3461
|
});
|
|
3440
3462
|
var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3441
3463
|
props.children;
|
|
@@ -3443,10 +3465,10 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3443
3465
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
3444
3466
|
style = props.style,
|
|
3445
3467
|
textStyle = props.textStyle,
|
|
3446
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3468
|
+
elementProps = _objectWithoutProperties(props, _excluded$14);
|
|
3447
3469
|
|
|
3448
|
-
var classes = getStyles(styles$
|
|
3449
|
-
var textClasses = getStyles(styles$
|
|
3470
|
+
var classes = getStyles(styles$S, ['.btn-close', disabled && '.btn-close-disabled']);
|
|
3471
|
+
var textClasses = getStyles(styles$S, ['.btn-close-text']);
|
|
3450
3472
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
3451
3473
|
ref: ref,
|
|
3452
3474
|
disabled: disabled,
|
|
@@ -3455,7 +3477,7 @@ var CloseButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3455
3477
|
}), StyleSheet.value('btn-close-bg'));
|
|
3456
3478
|
});
|
|
3457
3479
|
CloseButton.displayName = 'CloseButton';
|
|
3458
|
-
CloseButton.propTypes = propTypes$
|
|
3480
|
+
CloseButton.propTypes = propTypes$14;
|
|
3459
3481
|
|
|
3460
3482
|
var CollapseContext = /*#__PURE__*/React.createContext();
|
|
3461
3483
|
CollapseContext.displayName = 'CollapseContext';
|
|
@@ -3514,7 +3536,7 @@ function useCollapse(defaultVisible, controlledVisible, onToggle) {
|
|
|
3514
3536
|
}, [visible]);
|
|
3515
3537
|
}
|
|
3516
3538
|
|
|
3517
|
-
var propTypes$
|
|
3539
|
+
var propTypes$13 = {
|
|
3518
3540
|
children: PropTypes.node.isRequired,
|
|
3519
3541
|
defaultVisible: PropTypes.bool,
|
|
3520
3542
|
visible: PropTypes.bool,
|
|
@@ -3534,14 +3556,14 @@ var CollapseProvider = function CollapseProvider(props) {
|
|
|
3534
3556
|
};
|
|
3535
3557
|
|
|
3536
3558
|
CollapseProvider.displayName = 'CollapseProvider';
|
|
3537
|
-
CollapseProvider.propTypes = propTypes$
|
|
3559
|
+
CollapseProvider.propTypes = propTypes$13;
|
|
3538
3560
|
|
|
3539
|
-
var _excluded$
|
|
3561
|
+
var _excluded$13 = ["onPress"];
|
|
3540
3562
|
function useToggleCollapse(props) {
|
|
3541
3563
|
var context = useForcedContext(CollapseContext);
|
|
3542
3564
|
|
|
3543
3565
|
var handlePress = props.onPress,
|
|
3544
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
3566
|
+
restProps = _objectWithoutProperties(props, _excluded$13);
|
|
3545
3567
|
|
|
3546
3568
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
3547
3569
|
onPress: function onPress(event) {
|
|
@@ -3555,13 +3577,13 @@ function useToggleCollapse(props) {
|
|
|
3555
3577
|
});
|
|
3556
3578
|
}
|
|
3557
3579
|
|
|
3558
|
-
var _excluded
|
|
3559
|
-
var propTypes
|
|
3580
|
+
var _excluded$12 = ["children"];
|
|
3581
|
+
var propTypes$12 = {
|
|
3560
3582
|
children: PropTypes.node
|
|
3561
3583
|
};
|
|
3562
3584
|
var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3563
3585
|
var children = props.children,
|
|
3564
|
-
elementProps = _objectWithoutProperties(props, _excluded
|
|
3586
|
+
elementProps = _objectWithoutProperties(props, _excluded$12);
|
|
3565
3587
|
|
|
3566
3588
|
var _useForcedContext = useForcedContext(CollapseContext),
|
|
3567
3589
|
identifier = _useForcedContext.identifier,
|
|
@@ -3577,7 +3599,7 @@ var Collapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3577
3599
|
}), children);
|
|
3578
3600
|
});
|
|
3579
3601
|
Collapse.displayName = 'Collapse';
|
|
3580
|
-
Collapse.propTypes = propTypes
|
|
3602
|
+
Collapse.propTypes = propTypes$12;
|
|
3581
3603
|
Collapse.Provider = CollapseProvider;
|
|
3582
3604
|
Collapse.useToggle = useToggleCollapse;
|
|
3583
3605
|
|
|
@@ -3602,18 +3624,18 @@ function infix(breakpoint) {
|
|
|
3602
3624
|
var NavbarContext = /*#__PURE__*/React.createContext();
|
|
3603
3625
|
NavbarContext.displayName = 'NavbarContext';
|
|
3604
3626
|
|
|
3605
|
-
var _excluded$
|
|
3627
|
+
var _excluded$11 = ["fluid", "style"];
|
|
3606
3628
|
|
|
3607
|
-
var _templateObject$
|
|
3608
|
-
var propTypes$
|
|
3629
|
+
var _templateObject$S, _templateObject2$z, _templateObject3$i, _templateObject4$g, _templateObject5$e, _templateObject6$d, _templateObject7$a, _templateObject8$9;
|
|
3630
|
+
var propTypes$11 = {
|
|
3609
3631
|
children: PropTypes.node.isRequired,
|
|
3610
3632
|
fluid: PropTypes.oneOf([true].concat(_toConsumableArray(Object.keys(CONTAINER_MAX_WIDTHS)))),
|
|
3611
3633
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3612
3634
|
style: PropTypes.any
|
|
3613
3635
|
};
|
|
3614
|
-
var styles$
|
|
3615
|
-
'.container': css(_templateObject$
|
|
3616
|
-
'.container-sm': css(_templateObject2$
|
|
3636
|
+
var styles$R = StyleSheet.create(_objectSpread2({
|
|
3637
|
+
'.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 "]))),
|
|
3638
|
+
'.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) {
|
|
3617
3639
|
return t['container-max-widths'].sm;
|
|
3618
3640
|
}, function (t) {
|
|
3619
3641
|
return t['container-max-widths'].md;
|
|
@@ -3624,7 +3646,7 @@ var styles$O = StyleSheet.create(_objectSpread2({
|
|
|
3624
3646
|
}, function (t) {
|
|
3625
3647
|
return t['container-max-widths'].xxl;
|
|
3626
3648
|
}),
|
|
3627
|
-
'.container-md': css(_templateObject3$
|
|
3649
|
+
'.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) {
|
|
3628
3650
|
return t['container-max-widths'].md;
|
|
3629
3651
|
}, function (t) {
|
|
3630
3652
|
return t['container-max-widths'].lg;
|
|
@@ -3633,34 +3655,34 @@ var styles$O = StyleSheet.create(_objectSpread2({
|
|
|
3633
3655
|
}, function (t) {
|
|
3634
3656
|
return t['container-max-widths'].xxl;
|
|
3635
3657
|
}),
|
|
3636
|
-
'.container-lg': css(_templateObject4$
|
|
3658
|
+
'.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) {
|
|
3637
3659
|
return t['container-max-widths'].lg;
|
|
3638
3660
|
}, function (t) {
|
|
3639
3661
|
return t['container-max-widths'].xl;
|
|
3640
3662
|
}, function (t) {
|
|
3641
3663
|
return t['container-max-widths'].xxl;
|
|
3642
3664
|
}),
|
|
3643
|
-
'.container-xl': css(_templateObject5$
|
|
3665
|
+
'.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) {
|
|
3644
3666
|
return t['container-max-widths'].xl;
|
|
3645
3667
|
}, function (t) {
|
|
3646
3668
|
return t['container-max-widths'].xxl;
|
|
3647
3669
|
}),
|
|
3648
|
-
'.container-xxl': css(_templateObject6$
|
|
3670
|
+
'.container-xxl': css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteral(["\n @include media-breakpoint-up(xxl) {\n max-width: ", ";\n }\n "])), function (t) {
|
|
3649
3671
|
return t['container-max-widths'].xxl;
|
|
3650
3672
|
}),
|
|
3651
3673
|
// Navbar styles
|
|
3652
|
-
'.navbar .container': css(_templateObject7$
|
|
3674
|
+
'.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 "])))
|
|
3653
3675
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
3654
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .container"), css(_templateObject8$
|
|
3676
|
+
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)));
|
|
3655
3677
|
})));
|
|
3656
3678
|
var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3657
3679
|
var _props$fluid = props.fluid,
|
|
3658
3680
|
fluid = _props$fluid === void 0 ? 'sm' : _props$fluid,
|
|
3659
3681
|
style = props.style,
|
|
3660
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3682
|
+
elementProps = _objectWithoutProperties(props, _excluded$11);
|
|
3661
3683
|
|
|
3662
3684
|
var navbar = useContext(NavbarContext);
|
|
3663
|
-
var classes = getStyles(styles$
|
|
3685
|
+
var classes = getStyles(styles$R, ['.container', // Hint: Bootstrap's .container class is identical with .container-sm.
|
|
3664
3686
|
fluid !== true && ".container-".concat(fluid), // Navbar styles
|
|
3665
3687
|
navbar && '.navbar .container', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .container")]);
|
|
3666
3688
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
@@ -3669,16 +3691,17 @@ var Container = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3669
3691
|
}));
|
|
3670
3692
|
});
|
|
3671
3693
|
Container.displayName = 'Container';
|
|
3672
|
-
Container.propTypes = propTypes$
|
|
3694
|
+
Container.propTypes = propTypes$11;
|
|
3673
3695
|
|
|
3674
3696
|
var DropdownContext = /*#__PURE__*/React.createContext();
|
|
3675
3697
|
DropdownContext.displayName = 'DropdownContext';
|
|
3676
3698
|
|
|
3677
|
-
var propTypes$
|
|
3699
|
+
var propTypes$10 = {
|
|
3678
3700
|
children: PropTypes.func.isRequired,
|
|
3679
3701
|
placement: PropTypes.string.isRequired,
|
|
3680
3702
|
targetRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
|
3681
3703
|
offset: PropTypes.number,
|
|
3704
|
+
arrowOffset: PropTypes.number,
|
|
3682
3705
|
visible: PropTypes.bool.isRequired
|
|
3683
3706
|
};
|
|
3684
3707
|
|
|
@@ -3687,6 +3710,8 @@ var Overlay = function Overlay(props) {
|
|
|
3687
3710
|
targetRef = props.targetRef,
|
|
3688
3711
|
placement = props.placement,
|
|
3689
3712
|
offset = props.offset,
|
|
3713
|
+
_props$arrowOffset = props.arrowOffset,
|
|
3714
|
+
arrowOffset = _props$arrowOffset === void 0 ? 0 : _props$arrowOffset,
|
|
3690
3715
|
visible = props.visible;
|
|
3691
3716
|
var overlayRef = useRef();
|
|
3692
3717
|
var overlay = useOverlayPosition({
|
|
@@ -3695,27 +3720,44 @@ var Overlay = function Overlay(props) {
|
|
|
3695
3720
|
overlayRef: overlayRef,
|
|
3696
3721
|
offset: offset,
|
|
3697
3722
|
isOpen: visible
|
|
3698
|
-
});
|
|
3723
|
+
}); // Remove undefined arrow styles and adjust arrow offset.
|
|
3724
|
+
|
|
3725
|
+
if (overlay.arrowProps.style.left === undefined) {
|
|
3726
|
+
delete overlay.arrowProps.style.left;
|
|
3727
|
+
|
|
3728
|
+
if (overlay.arrowProps.style.top) {
|
|
3729
|
+
overlay.arrowProps.style.top -= arrowOffset;
|
|
3730
|
+
}
|
|
3731
|
+
}
|
|
3732
|
+
|
|
3733
|
+
if (overlay.arrowProps.style.top === undefined) {
|
|
3734
|
+
delete overlay.arrowProps.style.top;
|
|
3735
|
+
|
|
3736
|
+
if (overlay.arrowProps.style.left) {
|
|
3737
|
+
overlay.arrowProps.style.left -= arrowOffset;
|
|
3738
|
+
}
|
|
3739
|
+
}
|
|
3740
|
+
|
|
3699
3741
|
return children(overlay, overlayRef);
|
|
3700
3742
|
};
|
|
3701
3743
|
|
|
3702
3744
|
Overlay.displayName = 'Overlay';
|
|
3703
|
-
Overlay.propTypes = propTypes$
|
|
3745
|
+
Overlay.propTypes = propTypes$10;
|
|
3704
3746
|
|
|
3705
|
-
var _excluded$
|
|
3747
|
+
var _excluded$10 = ["children", "start", "end", "style"];
|
|
3706
3748
|
|
|
3707
|
-
var _templateObject$
|
|
3749
|
+
var _templateObject$R, _templateObject2$y;
|
|
3708
3750
|
var ALIGNMENT_BREAKPOINTS = [true, 'sm', 'md', 'lg', 'xl', 'xxl'];
|
|
3709
|
-
var propTypes
|
|
3751
|
+
var propTypes$$ = {
|
|
3710
3752
|
children: PropTypes.node.isRequired,
|
|
3711
3753
|
start: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
|
|
3712
3754
|
end: PropTypes.oneOf(ALIGNMENT_BREAKPOINTS),
|
|
3713
3755
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3714
3756
|
style: PropTypes.any
|
|
3715
3757
|
};
|
|
3716
|
-
var styles$
|
|
3717
|
-
'.dropdown-menu': css(_templateObject$
|
|
3718
|
-
'.dropdown-menu-text': css(_templateObject2$
|
|
3758
|
+
var styles$Q = StyleSheet.create({
|
|
3759
|
+
'.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 "]))),
|
|
3760
|
+
'.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 "])))
|
|
3719
3761
|
});
|
|
3720
3762
|
|
|
3721
3763
|
var getAlignment = function getAlignment(media, start, end) {
|
|
@@ -3735,7 +3777,7 @@ var getAlignment = function getAlignment(media, start, end) {
|
|
|
3735
3777
|
return startIndex > endIndex ? 'start' : 'end';
|
|
3736
3778
|
};
|
|
3737
3779
|
|
|
3738
|
-
var
|
|
3780
|
+
var transformPlacement = function transformPlacement(media, direction, start, end) {
|
|
3739
3781
|
if (direction === 'start' || direction === 'end') {
|
|
3740
3782
|
return "".concat(direction, " top");
|
|
3741
3783
|
}
|
|
@@ -3750,7 +3792,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3750
3792
|
_props$end = props.end,
|
|
3751
3793
|
end = _props$end === void 0 ? false : _props$end,
|
|
3752
3794
|
style = props.style,
|
|
3753
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3795
|
+
elementProps = _objectWithoutProperties(props, _excluded$10);
|
|
3754
3796
|
|
|
3755
3797
|
var dropdown = useForcedContext(DropdownContext);
|
|
3756
3798
|
var media = useMedia();
|
|
@@ -3763,22 +3805,20 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3763
3805
|
return null;
|
|
3764
3806
|
}
|
|
3765
3807
|
|
|
3766
|
-
var classes = getStyles(styles$
|
|
3767
|
-
var textClasses = getStyles(styles$
|
|
3808
|
+
var classes = getStyles(styles$Q, ['.dropdown-menu']);
|
|
3809
|
+
var textClasses = getStyles(styles$Q, ['.dropdown-menu-text']);
|
|
3768
3810
|
return /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.createElement(Overlay, {
|
|
3769
|
-
placement:
|
|
3811
|
+
placement: transformPlacement(media, direction, start, end),
|
|
3770
3812
|
targetRef: triggerRef,
|
|
3771
3813
|
offset: convertToNumber(StyleSheet.value('dropdown-spacer')),
|
|
3772
3814
|
visible: visible
|
|
3773
|
-
}, function (
|
|
3774
|
-
var overlayProps = _ref.overlayProps,
|
|
3775
|
-
rendered = _ref.rendered;
|
|
3815
|
+
}, function (overlay, overlayRef) {
|
|
3776
3816
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3777
|
-
ref: concatRefs(
|
|
3817
|
+
ref: concatRefs(overlayRef, ref),
|
|
3778
3818
|
accessibilityLabelledBy: identifier,
|
|
3779
3819
|
style: [classes, style, {
|
|
3780
|
-
opacity: rendered ? 1 : 0
|
|
3781
|
-
}, overlayProps.style]
|
|
3820
|
+
opacity: overlay.rendered ? 1 : 0
|
|
3821
|
+
}, overlay.overlayProps.style]
|
|
3782
3822
|
}), /*#__PURE__*/React.createElement(DropdownContext.Provider, {
|
|
3783
3823
|
value: dropdown
|
|
3784
3824
|
}, /*#__PURE__*/React.createElement(TextStyleProvider, {
|
|
@@ -3787,12 +3827,12 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3787
3827
|
}));
|
|
3788
3828
|
});
|
|
3789
3829
|
DropdownMenu.displayName = 'DropdownMenu';
|
|
3790
|
-
DropdownMenu.propTypes = propTypes
|
|
3830
|
+
DropdownMenu.propTypes = propTypes$$;
|
|
3791
3831
|
|
|
3792
|
-
var _excluded
|
|
3832
|
+
var _excluded$$ = ["children", "onPress", "active", "disabled", "style", "textStyle"];
|
|
3793
3833
|
|
|
3794
|
-
var _templateObject$
|
|
3795
|
-
var propTypes$
|
|
3834
|
+
var _templateObject$Q, _templateObject2$x, _templateObject3$h, _templateObject4$f, _templateObject5$d, _templateObject6$c;
|
|
3835
|
+
var propTypes$_ = {
|
|
3796
3836
|
children: PropTypes.node.isRequired,
|
|
3797
3837
|
onPress: PropTypes.func,
|
|
3798
3838
|
active: PropTypes.bool,
|
|
@@ -3802,13 +3842,13 @@ var propTypes$X = {
|
|
|
3802
3842
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3803
3843
|
textStyle: PropTypes.any
|
|
3804
3844
|
};
|
|
3805
|
-
var styles$
|
|
3806
|
-
'.dropdown-item': css(_templateObject$
|
|
3807
|
-
'.dropdown-item-text': css(_templateObject2$
|
|
3808
|
-
'.dropdown-item-active': css(_templateObject3$
|
|
3809
|
-
'.dropdown-item-active-text': css(_templateObject4$
|
|
3810
|
-
'.dropdown-item-disabled': css(_templateObject5$
|
|
3811
|
-
'.dropdown-item-disabled-text': css(_templateObject6$
|
|
3845
|
+
var styles$P = StyleSheet.create({
|
|
3846
|
+
'.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 "]))),
|
|
3847
|
+
'.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 "]))),
|
|
3848
|
+
'.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 "]))),
|
|
3849
|
+
'.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 "]))),
|
|
3850
|
+
'.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 "]))),
|
|
3851
|
+
'.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 "])))
|
|
3812
3852
|
});
|
|
3813
3853
|
|
|
3814
3854
|
var DropdownItem = function DropdownItem(props) {
|
|
@@ -3820,11 +3860,11 @@ var DropdownItem = function DropdownItem(props) {
|
|
|
3820
3860
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
3821
3861
|
style = props.style,
|
|
3822
3862
|
textStyle = props.textStyle,
|
|
3823
|
-
elementProps = _objectWithoutProperties(props, _excluded
|
|
3863
|
+
elementProps = _objectWithoutProperties(props, _excluded$$);
|
|
3824
3864
|
|
|
3825
3865
|
var dropdown = useForcedContext(DropdownContext);
|
|
3826
|
-
var classes = getStyles(styles$
|
|
3827
|
-
var textClasses = getStyles(styles$
|
|
3866
|
+
var classes = getStyles(styles$P, ['.dropdown-item', active && '.dropdown-item-active', disabled && '.dropdown-item-disabled']);
|
|
3867
|
+
var textClasses = getStyles(styles$P, ['.dropdown-item-text', active && '.dropdown-item-active-text', disabled && '.dropdown-item-disabled-text']);
|
|
3828
3868
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
3829
3869
|
onPress: concatFns(function () {
|
|
3830
3870
|
dropdown.setVisible(false);
|
|
@@ -3836,37 +3876,37 @@ var DropdownItem = function DropdownItem(props) {
|
|
|
3836
3876
|
};
|
|
3837
3877
|
|
|
3838
3878
|
DropdownItem.displayName = 'DropdownItem';
|
|
3839
|
-
DropdownItem.propTypes = propTypes$
|
|
3879
|
+
DropdownItem.propTypes = propTypes$_;
|
|
3840
3880
|
|
|
3841
|
-
var _excluded$
|
|
3881
|
+
var _excluded$_ = ["children", "style"];
|
|
3842
3882
|
|
|
3843
|
-
var _templateObject$
|
|
3844
|
-
var propTypes$
|
|
3883
|
+
var _templateObject$P;
|
|
3884
|
+
var propTypes$Z = {
|
|
3845
3885
|
children: PropTypes.string.isRequired,
|
|
3846
3886
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3847
3887
|
style: PropTypes.any
|
|
3848
3888
|
};
|
|
3849
|
-
var styles$
|
|
3850
|
-
'.dropdown-item-text': css(_templateObject$
|
|
3889
|
+
var styles$O = StyleSheet.create({
|
|
3890
|
+
'.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 "])))
|
|
3851
3891
|
});
|
|
3852
3892
|
var DropdownItemText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3853
3893
|
var children = props.children,
|
|
3854
3894
|
style = props.style,
|
|
3855
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3895
|
+
elementProps = _objectWithoutProperties(props, _excluded$_);
|
|
3856
3896
|
|
|
3857
|
-
var classes = getStyles(styles$
|
|
3897
|
+
var classes = getStyles(styles$O, ['.dropdown-item-text']);
|
|
3858
3898
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
3859
3899
|
ref: ref,
|
|
3860
3900
|
style: [classes, style]
|
|
3861
3901
|
}), children);
|
|
3862
3902
|
});
|
|
3863
3903
|
DropdownItemText.displayName = 'DropdownItemText';
|
|
3864
|
-
DropdownItemText.propTypes = propTypes$
|
|
3904
|
+
DropdownItemText.propTypes = propTypes$Z;
|
|
3865
3905
|
|
|
3866
|
-
var _excluded$
|
|
3906
|
+
var _excluded$Z = ["children", "size", "style"];
|
|
3867
3907
|
|
|
3868
|
-
var _templateObject$
|
|
3869
|
-
var propTypes$
|
|
3908
|
+
var _templateObject$O, _templateObject2$w;
|
|
3909
|
+
var propTypes$Y = {
|
|
3870
3910
|
children: PropTypes.node.isRequired,
|
|
3871
3911
|
size: PropTypes.oneOf(Object.keys(FONT_SIZES).map(function (k) {
|
|
3872
3912
|
return Number(k);
|
|
@@ -3874,18 +3914,18 @@ var propTypes$V = {
|
|
|
3874
3914
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3875
3915
|
style: PropTypes.any
|
|
3876
3916
|
};
|
|
3877
|
-
var styles$
|
|
3878
|
-
heading: css(_templateObject$
|
|
3917
|
+
var styles$N = StyleSheet.create(_objectSpread2({
|
|
3918
|
+
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 "])))
|
|
3879
3919
|
}, each(FONT_SIZES, function (size, value) {
|
|
3880
|
-
return _defineProperty({}, ".h".concat(size), css(_templateObject2$
|
|
3920
|
+
return _defineProperty({}, ".h".concat(size), css(_templateObject2$w || (_templateObject2$w = _taggedTemplateLiteral(["\n font-size: ", ";\n line-height: ", " * $headings-line-height;\n "])), value, value));
|
|
3881
3921
|
})));
|
|
3882
3922
|
var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3883
3923
|
var children = props.children,
|
|
3884
3924
|
size = props.size,
|
|
3885
3925
|
style = props.style,
|
|
3886
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3926
|
+
elementProps = _objectWithoutProperties(props, _excluded$Z);
|
|
3887
3927
|
|
|
3888
|
-
var classes = getStyles(styles$
|
|
3928
|
+
var classes = getStyles(styles$N, ['heading', ".h".concat(size)]);
|
|
3889
3929
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
3890
3930
|
ref: ref,
|
|
3891
3931
|
accessibilityRole: "header",
|
|
@@ -3894,25 +3934,25 @@ var Heading$1 = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3894
3934
|
}), children);
|
|
3895
3935
|
});
|
|
3896
3936
|
Heading$1.displayName = 'Heading';
|
|
3897
|
-
Heading$1.propTypes = propTypes$
|
|
3937
|
+
Heading$1.propTypes = propTypes$Y;
|
|
3898
3938
|
|
|
3899
|
-
var _excluded$
|
|
3939
|
+
var _excluded$Y = ["children", "style"];
|
|
3900
3940
|
|
|
3901
|
-
var _templateObject$
|
|
3902
|
-
var propTypes$
|
|
3941
|
+
var _templateObject$N;
|
|
3942
|
+
var propTypes$X = {
|
|
3903
3943
|
children: PropTypes.node.isRequired,
|
|
3904
3944
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3905
3945
|
style: PropTypes.any
|
|
3906
3946
|
};
|
|
3907
|
-
var styles$
|
|
3908
|
-
'.dropdown-header': css(_templateObject$
|
|
3947
|
+
var styles$M = StyleSheet.create({
|
|
3948
|
+
'.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 "])))
|
|
3909
3949
|
});
|
|
3910
3950
|
var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3911
3951
|
var children = props.children,
|
|
3912
3952
|
style = props.style,
|
|
3913
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3953
|
+
elementProps = _objectWithoutProperties(props, _excluded$Y);
|
|
3914
3954
|
|
|
3915
|
-
var classes = getStyles(styles$
|
|
3955
|
+
var classes = getStyles(styles$M, ['.dropdown-header']);
|
|
3916
3956
|
return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
|
|
3917
3957
|
ref: ref,
|
|
3918
3958
|
size: 6,
|
|
@@ -3920,30 +3960,30 @@ var DropdownHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
3920
3960
|
}), children);
|
|
3921
3961
|
});
|
|
3922
3962
|
DropdownHeader.displayName = 'DropdownHeader';
|
|
3923
|
-
DropdownHeader.propTypes = propTypes$
|
|
3963
|
+
DropdownHeader.propTypes = propTypes$X;
|
|
3924
3964
|
|
|
3925
|
-
var _excluded$
|
|
3965
|
+
var _excluded$X = ["style"];
|
|
3926
3966
|
|
|
3927
|
-
var _templateObject$
|
|
3928
|
-
var propTypes$
|
|
3967
|
+
var _templateObject$M;
|
|
3968
|
+
var propTypes$W = {
|
|
3929
3969
|
// eslint-disable-next-line react/forbid-prop-types
|
|
3930
3970
|
style: PropTypes.any
|
|
3931
3971
|
};
|
|
3932
|
-
var styles$
|
|
3933
|
-
'.dropdown-divider': css(_templateObject$
|
|
3972
|
+
var styles$L = StyleSheet.create({
|
|
3973
|
+
'.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 "])))
|
|
3934
3974
|
});
|
|
3935
3975
|
var DropdownDivider = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
3936
3976
|
var style = props.style,
|
|
3937
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
3977
|
+
elementProps = _objectWithoutProperties(props, _excluded$X);
|
|
3938
3978
|
|
|
3939
|
-
var classes = getStyles(styles$
|
|
3979
|
+
var classes = getStyles(styles$L, ['.dropdown-divider']);
|
|
3940
3980
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
3941
3981
|
ref: ref,
|
|
3942
3982
|
style: [classes, style]
|
|
3943
3983
|
}));
|
|
3944
3984
|
});
|
|
3945
3985
|
DropdownDivider.displayName = 'DropdownDivider';
|
|
3946
|
-
DropdownDivider.propTypes = propTypes$
|
|
3986
|
+
DropdownDivider.propTypes = propTypes$W;
|
|
3947
3987
|
|
|
3948
3988
|
function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
|
|
3949
3989
|
var identifier = useIdentifier('dropdown');
|
|
@@ -3965,12 +4005,12 @@ function useDropdown(defaultVisible, controlledVisible, onToggle, direction) {
|
|
|
3965
4005
|
}, [visible]);
|
|
3966
4006
|
}
|
|
3967
4007
|
|
|
3968
|
-
var _excluded$
|
|
4008
|
+
var _excluded$W = ["onPress"];
|
|
3969
4009
|
function useToggleDropdown(props) {
|
|
3970
4010
|
var context = useForcedContext(DropdownContext);
|
|
3971
4011
|
|
|
3972
4012
|
var handlePress = props.onPress,
|
|
3973
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
4013
|
+
restProps = _objectWithoutProperties(props, _excluded$W);
|
|
3974
4014
|
|
|
3975
4015
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
3976
4016
|
nativeID: context.identifier,
|
|
@@ -3986,11 +4026,11 @@ function useToggleDropdown(props) {
|
|
|
3986
4026
|
});
|
|
3987
4027
|
}
|
|
3988
4028
|
|
|
3989
|
-
var _excluded$
|
|
4029
|
+
var _excluded$V = ["children", "defaultVisible", "visible", "onToggle", "direction", "style"];
|
|
3990
4030
|
|
|
3991
|
-
var _templateObject$
|
|
4031
|
+
var _templateObject$L;
|
|
3992
4032
|
var DIRECTIONS = ['top', 'bottom', 'start', 'end'];
|
|
3993
|
-
var propTypes$
|
|
4033
|
+
var propTypes$V = {
|
|
3994
4034
|
children: PropTypes.node,
|
|
3995
4035
|
defaultVisible: PropTypes.bool,
|
|
3996
4036
|
visible: PropTypes.bool,
|
|
@@ -3999,8 +4039,8 @@ var propTypes$S = {
|
|
|
3999
4039
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4000
4040
|
style: PropTypes.any
|
|
4001
4041
|
};
|
|
4002
|
-
var styles$
|
|
4003
|
-
'.dropdown': css(_templateObject$
|
|
4042
|
+
var styles$K = StyleSheet.create({
|
|
4043
|
+
'.dropdown': css(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n position: relative;\n "])))
|
|
4004
4044
|
});
|
|
4005
4045
|
var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4006
4046
|
var children = props.children,
|
|
@@ -4011,10 +4051,10 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4011
4051
|
_props$direction = props.direction,
|
|
4012
4052
|
direction = _props$direction === void 0 ? 'bottom' : _props$direction,
|
|
4013
4053
|
style = props.style,
|
|
4014
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4054
|
+
elementProps = _objectWithoutProperties(props, _excluded$V);
|
|
4015
4055
|
|
|
4016
4056
|
var dropdown = useDropdown(defaultVisible, visible, onToggle, direction);
|
|
4017
|
-
var classes = getStyles(styles$
|
|
4057
|
+
var classes = getStyles(styles$K, ['.dropdown']);
|
|
4018
4058
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4019
4059
|
ref: ref,
|
|
4020
4060
|
style: [classes, style]
|
|
@@ -4023,7 +4063,7 @@ var Dropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4023
4063
|
}, children));
|
|
4024
4064
|
});
|
|
4025
4065
|
Dropdown.displayName = 'Dropdown';
|
|
4026
|
-
Dropdown.propTypes = propTypes$
|
|
4066
|
+
Dropdown.propTypes = propTypes$V;
|
|
4027
4067
|
Dropdown.Context = DropdownContext;
|
|
4028
4068
|
Dropdown.ItemText = DropdownItemText;
|
|
4029
4069
|
Dropdown.Header = DropdownHeader;
|
|
@@ -4032,10 +4072,10 @@ Dropdown.Item = DropdownItem;
|
|
|
4032
4072
|
Dropdown.Divider = DropdownDivider;
|
|
4033
4073
|
Dropdown.useToggle = useToggleDropdown;
|
|
4034
4074
|
|
|
4035
|
-
var _excluded$
|
|
4075
|
+
var _excluded$U = ["children", "type", "value", "onChange", "onPress", "label", "disabled", "valid", "invalid", "style", "inputStyle", "labelStyle"];
|
|
4036
4076
|
|
|
4037
|
-
var _templateObject$
|
|
4038
|
-
var propTypes$
|
|
4077
|
+
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;
|
|
4078
|
+
var propTypes$U = {
|
|
4039
4079
|
children: PropTypes.node,
|
|
4040
4080
|
type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
|
|
4041
4081
|
value: PropTypes.bool.isRequired,
|
|
@@ -4052,25 +4092,25 @@ var propTypes$R = {
|
|
|
4052
4092
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4053
4093
|
labelStyle: PropTypes.any
|
|
4054
4094
|
};
|
|
4055
|
-
var styles$
|
|
4056
|
-
'.form-check': css(_templateObject$
|
|
4057
|
-
'.form-check-disabled': css(_templateObject2$
|
|
4058
|
-
'.form-check-input': css(_templateObject3$
|
|
4059
|
-
'.form-check-input-checkbox': css(_templateObject4$
|
|
4060
|
-
'.form-check-input-radio': css(_templateObject5$
|
|
4061
|
-
'.form-check-input-checked': css(_templateObject6$
|
|
4062
|
-
'.form-check-label': css(_templateObject7$
|
|
4063
|
-
'.form-switch': css(_templateObject8$
|
|
4064
|
-
'.form-check-input-switch': css(_templateObject9$
|
|
4065
|
-
'.form-check-input-switch-checked': css(_templateObject10$
|
|
4095
|
+
var styles$J = StyleSheet.create(_objectSpread2({
|
|
4096
|
+
'.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 "]))),
|
|
4097
|
+
'.form-check-disabled': css(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteral(["\n opacity: $form-check-label-disabled-opacity;\n "]))),
|
|
4098
|
+
'.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 "]))),
|
|
4099
|
+
'.form-check-input-checkbox': css(_templateObject4$e || (_templateObject4$e = _taggedTemplateLiteral(["\n border-radius: $form-check-input-border-radius;\n "]))),
|
|
4100
|
+
'.form-check-input-radio': css(_templateObject5$c || (_templateObject5$c = _taggedTemplateLiteral(["\n border-radius: $form-check-radio-border-radius;\n "]))),
|
|
4101
|
+
'.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 "]))),
|
|
4102
|
+
'.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 "]))),
|
|
4103
|
+
'.form-switch': css(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteral(["\n padding-left: $form-switch-padding-start;\n "]))),
|
|
4104
|
+
'.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 "]))),
|
|
4105
|
+
'.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 "])))
|
|
4066
4106
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4067
4107
|
var _ref;
|
|
4068
4108
|
|
|
4069
|
-
return _ref = {}, _defineProperty(_ref, ".form-check-input.is-".concat(state), css(_templateObject11$
|
|
4109
|
+
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) {
|
|
4070
4110
|
return data(t).color;
|
|
4071
|
-
})), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$
|
|
4111
|
+
})), _defineProperty(_ref, ".form-check-input-checked.is-".concat(state), css(_templateObject12$3 || (_templateObject12$3 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
|
|
4072
4112
|
return data(t).color;
|
|
4073
|
-
})), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$
|
|
4113
|
+
})), _defineProperty(_ref, ".form-check-label.is-".concat(state), css(_templateObject13$3 || (_templateObject13$3 = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
4074
4114
|
return data(t).color;
|
|
4075
4115
|
})), _ref;
|
|
4076
4116
|
})));
|
|
@@ -4107,16 +4147,16 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4107
4147
|
style = props.style,
|
|
4108
4148
|
inputStyle = props.inputStyle,
|
|
4109
4149
|
labelStyle = props.labelStyle,
|
|
4110
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4150
|
+
elementProps = _objectWithoutProperties(props, _excluded$U);
|
|
4111
4151
|
|
|
4112
4152
|
if (!children && !label) {
|
|
4113
4153
|
// eslint-disable-next-line no-console
|
|
4114
4154
|
console.warn('You need to provide either children or a label for accessibility.');
|
|
4115
4155
|
}
|
|
4116
4156
|
|
|
4117
|
-
var classes = getStyles(styles$
|
|
4118
|
-
var inputClasses = getStyles(styles$
|
|
4119
|
-
var labelClasses = getStyles(styles$
|
|
4157
|
+
var classes = getStyles(styles$J, ['.form-check', type === 'switch' && '.form-switch', disabled && '.form-check-disabled']);
|
|
4158
|
+
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']);
|
|
4159
|
+
var labelClasses = getStyles(styles$J, ['.form-check-label', valid && '.form-check-label.is-valid', invalid && '.form-check-label.is-invalid']); // TODO &:focus, &:active
|
|
4120
4160
|
|
|
4121
4161
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
4122
4162
|
ref: ref,
|
|
@@ -4135,7 +4175,7 @@ var CheckInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4135
4175
|
}, children));
|
|
4136
4176
|
});
|
|
4137
4177
|
CheckInput.displayName = 'CheckInput';
|
|
4138
|
-
CheckInput.propTypes = propTypes$
|
|
4178
|
+
CheckInput.propTypes = propTypes$U;
|
|
4139
4179
|
|
|
4140
4180
|
var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4141
4181
|
var elementProps = _extends({}, props);
|
|
@@ -4147,17 +4187,17 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4147
4187
|
});
|
|
4148
4188
|
Checkbox.displayName = 'Checkbox';
|
|
4149
4189
|
|
|
4150
|
-
var _excluded$
|
|
4190
|
+
var _excluded$T = ["children", "type", "style"];
|
|
4151
4191
|
|
|
4152
|
-
var _templateObject$
|
|
4153
|
-
var propTypes$
|
|
4192
|
+
var _templateObject$J;
|
|
4193
|
+
var propTypes$T = {
|
|
4154
4194
|
children: PropTypes.node.isRequired,
|
|
4155
4195
|
type: PropTypes.oneOf(Object.keys(FORM_VALIDATION_STATES)),
|
|
4156
4196
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4157
4197
|
style: PropTypes.any
|
|
4158
4198
|
};
|
|
4159
|
-
var styles$
|
|
4160
|
-
return _defineProperty({}, ".".concat(state, "-feedback"), css(_templateObject$
|
|
4199
|
+
var styles$I = StyleSheet.create(_objectSpread2({}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4200
|
+
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) {
|
|
4161
4201
|
return data(t).color;
|
|
4162
4202
|
}));
|
|
4163
4203
|
})));
|
|
@@ -4165,44 +4205,44 @@ var Feedback = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4165
4205
|
var children = props.children,
|
|
4166
4206
|
type = props.type,
|
|
4167
4207
|
style = props.style,
|
|
4168
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4208
|
+
elementProps = _objectWithoutProperties(props, _excluded$T);
|
|
4169
4209
|
|
|
4170
|
-
var classes = getStyles(styles$
|
|
4210
|
+
var classes = getStyles(styles$I, [".".concat(type, "-feedback")]);
|
|
4171
4211
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
4172
4212
|
ref: ref,
|
|
4173
4213
|
style: [classes, style]
|
|
4174
4214
|
}), children);
|
|
4175
4215
|
});
|
|
4176
4216
|
Feedback.displayName = 'Feedback';
|
|
4177
|
-
Feedback.propTypes = propTypes$
|
|
4217
|
+
Feedback.propTypes = propTypes$T;
|
|
4178
4218
|
|
|
4179
|
-
var _excluded$
|
|
4219
|
+
var _excluded$S = ["children", "style"];
|
|
4180
4220
|
|
|
4181
|
-
var _templateObject$
|
|
4182
|
-
var propTypes$
|
|
4221
|
+
var _templateObject$I;
|
|
4222
|
+
var propTypes$S = {
|
|
4183
4223
|
children: PropTypes.node.isRequired,
|
|
4184
4224
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4185
4225
|
style: PropTypes.any
|
|
4186
4226
|
};
|
|
4187
|
-
var styles$
|
|
4188
|
-
'.form-text': css(_templateObject$
|
|
4227
|
+
var styles$H = StyleSheet.create({
|
|
4228
|
+
'.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 "])))
|
|
4189
4229
|
});
|
|
4190
4230
|
var FormText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4191
4231
|
var children = props.children,
|
|
4192
4232
|
style = props.style,
|
|
4193
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4233
|
+
elementProps = _objectWithoutProperties(props, _excluded$S);
|
|
4194
4234
|
|
|
4195
|
-
var classes = getStyles(styles$
|
|
4235
|
+
var classes = getStyles(styles$H, ['.form-text']);
|
|
4196
4236
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
4197
4237
|
ref: ref,
|
|
4198
4238
|
style: [classes, style]
|
|
4199
4239
|
}), children);
|
|
4200
4240
|
});
|
|
4201
4241
|
FormText.displayName = 'FormText';
|
|
4202
|
-
FormText.propTypes = propTypes$
|
|
4242
|
+
FormText.propTypes = propTypes$S;
|
|
4203
4243
|
|
|
4204
|
-
var _excluded$
|
|
4205
|
-
var propTypes$
|
|
4244
|
+
var _excluded$R = ["contentContainerStyle", "style", "styleName"];
|
|
4245
|
+
var propTypes$R = {
|
|
4206
4246
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4207
4247
|
contentContainerStyle: PropTypes.any,
|
|
4208
4248
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -4214,7 +4254,7 @@ var ScrollView = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4214
4254
|
var contentContainerStyle = props.contentContainerStyle,
|
|
4215
4255
|
style = props.style,
|
|
4216
4256
|
styleName = props.styleName,
|
|
4217
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4257
|
+
elementProps = _objectWithoutProperties(props, _excluded$R);
|
|
4218
4258
|
|
|
4219
4259
|
var media = useMedia();
|
|
4220
4260
|
var resolveContentContainerStyle = useStyle(contentContainerStyle);
|
|
@@ -4230,53 +4270,53 @@ var ScrollView = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4230
4270
|
}));
|
|
4231
4271
|
});
|
|
4232
4272
|
ScrollView.displayName = 'ScrollView';
|
|
4233
|
-
ScrollView.propTypes = propTypes$
|
|
4273
|
+
ScrollView.propTypes = propTypes$R;
|
|
4234
4274
|
|
|
4235
|
-
var _excluded$
|
|
4275
|
+
var _excluded$Q = ["children", "style"];
|
|
4236
4276
|
|
|
4237
|
-
var _templateObject$
|
|
4238
|
-
var propTypes$
|
|
4277
|
+
var _templateObject$H, _templateObject2$u;
|
|
4278
|
+
var propTypes$Q = {
|
|
4239
4279
|
children: PropTypes.node.isRequired,
|
|
4240
4280
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4241
4281
|
style: PropTypes.any
|
|
4242
4282
|
};
|
|
4243
|
-
var styles$
|
|
4244
|
-
'.offcanvas-header': css(_templateObject$
|
|
4283
|
+
var styles$G = StyleSheet.create(_objectSpread2({
|
|
4284
|
+
'.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 "])))
|
|
4245
4285
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4246
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-header"), css(_templateObject2$
|
|
4286
|
+
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)));
|
|
4247
4287
|
})));
|
|
4248
4288
|
var OffcanvasHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4249
4289
|
var children = props.children,
|
|
4250
4290
|
style = props.style,
|
|
4251
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4291
|
+
elementProps = _objectWithoutProperties(props, _excluded$Q);
|
|
4252
4292
|
|
|
4253
4293
|
var navbar = useContext(NavbarContext);
|
|
4254
|
-
var classes = getStyles(styles$
|
|
4294
|
+
var classes = getStyles(styles$G, ['.offcanvas-header', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-header")]);
|
|
4255
4295
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4256
4296
|
ref: ref,
|
|
4257
4297
|
style: [classes, style]
|
|
4258
4298
|
}), children);
|
|
4259
4299
|
});
|
|
4260
4300
|
OffcanvasHeader.displayName = 'OffcanvasHeader';
|
|
4261
|
-
OffcanvasHeader.propTypes = propTypes$
|
|
4301
|
+
OffcanvasHeader.propTypes = propTypes$Q;
|
|
4262
4302
|
|
|
4263
|
-
var _excluded$
|
|
4303
|
+
var _excluded$P = ["children", "style"];
|
|
4264
4304
|
|
|
4265
|
-
var _templateObject$
|
|
4266
|
-
var propTypes$
|
|
4305
|
+
var _templateObject$G;
|
|
4306
|
+
var propTypes$P = {
|
|
4267
4307
|
children: PropTypes.node.isRequired,
|
|
4268
4308
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4269
4309
|
style: PropTypes.any
|
|
4270
4310
|
};
|
|
4271
|
-
var styles$
|
|
4272
|
-
'.offcanvas-title': css(_templateObject$
|
|
4311
|
+
var styles$F = StyleSheet.create({
|
|
4312
|
+
'.offcanvas-title': css(_templateObject$G || (_templateObject$G = _taggedTemplateLiteral(["\n margin-bottom: 0;\n line-height: $font-size-base * $offcanvas-title-line-height;\n "])))
|
|
4273
4313
|
});
|
|
4274
4314
|
var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4275
4315
|
var children = props.children,
|
|
4276
4316
|
style = props.style,
|
|
4277
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4317
|
+
elementProps = _objectWithoutProperties(props, _excluded$P);
|
|
4278
4318
|
|
|
4279
|
-
var classes = getStyles(styles$
|
|
4319
|
+
var classes = getStyles(styles$F, ['.offcanvas-title']);
|
|
4280
4320
|
return /*#__PURE__*/React.createElement(Heading$1, _extends({
|
|
4281
4321
|
size: 5
|
|
4282
4322
|
}, elementProps, {
|
|
@@ -4285,42 +4325,42 @@ var OffcanvasTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4285
4325
|
}), children);
|
|
4286
4326
|
});
|
|
4287
4327
|
OffcanvasTitle.displayName = 'OffcanvasTitle';
|
|
4288
|
-
OffcanvasTitle.propTypes = propTypes$
|
|
4328
|
+
OffcanvasTitle.propTypes = propTypes$P;
|
|
4289
4329
|
|
|
4290
|
-
var _excluded$
|
|
4330
|
+
var _excluded$O = ["children", "style"];
|
|
4291
4331
|
|
|
4292
|
-
var _templateObject$
|
|
4293
|
-
var propTypes$
|
|
4332
|
+
var _templateObject$F, _templateObject2$t;
|
|
4333
|
+
var propTypes$O = {
|
|
4294
4334
|
children: PropTypes.node.isRequired,
|
|
4295
4335
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4296
4336
|
style: PropTypes.any
|
|
4297
4337
|
};
|
|
4298
|
-
var styles$
|
|
4299
|
-
'.offcanvas-body': css(_templateObject$
|
|
4338
|
+
var styles$E = StyleSheet.create(_objectSpread2({
|
|
4339
|
+
'.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 "])))
|
|
4300
4340
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4301
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas-body"), css(_templateObject2$
|
|
4341
|
+
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)));
|
|
4302
4342
|
})));
|
|
4303
4343
|
var OffcanvasBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4304
4344
|
var children = props.children,
|
|
4305
4345
|
style = props.style,
|
|
4306
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4346
|
+
elementProps = _objectWithoutProperties(props, _excluded$O);
|
|
4307
4347
|
|
|
4308
4348
|
var navbar = useContext(NavbarContext);
|
|
4309
|
-
var classes = getStyles(styles$
|
|
4349
|
+
var classes = getStyles(styles$E, ['.offcanvas-body', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas-body")]);
|
|
4310
4350
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4311
4351
|
ref: ref,
|
|
4312
4352
|
style: [classes, style]
|
|
4313
4353
|
}), children);
|
|
4314
4354
|
});
|
|
4315
4355
|
OffcanvasBody.displayName = 'OffcanvasBody';
|
|
4316
|
-
OffcanvasBody.propTypes = propTypes$
|
|
4356
|
+
OffcanvasBody.propTypes = propTypes$O;
|
|
4317
4357
|
|
|
4318
|
-
var _excluded$
|
|
4358
|
+
var _excluded$N = ["children", "visible", "placement", "backdrop", "onToggle", "style"];
|
|
4319
4359
|
|
|
4320
|
-
var _templateObject$
|
|
4360
|
+
var _templateObject$E, _templateObject2$s, _templateObject3$f, _templateObject4$d, _templateObject5$b, _templateObject6$a, _templateObject7$8, _templateObject8$7;
|
|
4321
4361
|
var PLACEMENTS$1 = ['top', 'bottom', 'start', 'end']; // , 'auto'
|
|
4322
4362
|
|
|
4323
|
-
var propTypes$
|
|
4363
|
+
var propTypes$N = {
|
|
4324
4364
|
children: PropTypes.node.isRequired,
|
|
4325
4365
|
visible: PropTypes.bool,
|
|
4326
4366
|
placement: PropTypes.oneOf(PLACEMENTS$1),
|
|
@@ -4329,16 +4369,16 @@ var propTypes$K = {
|
|
|
4329
4369
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4330
4370
|
style: PropTypes.any
|
|
4331
4371
|
};
|
|
4332
|
-
var styles$
|
|
4333
|
-
'.offcanvas': css(_templateObject$
|
|
4334
|
-
'.offcanvas-text': css(_templateObject2$
|
|
4335
|
-
'.offcanvas-backdrop': css(_templateObject3$
|
|
4336
|
-
'.offcanvas-start': css(_templateObject4$
|
|
4337
|
-
'.offcanvas-end': css(_templateObject5$
|
|
4338
|
-
'.offcanvas-top': css(_templateObject6$
|
|
4339
|
-
'.offcanvas-bottom': css(_templateObject7$
|
|
4372
|
+
var styles$D = StyleSheet.create(_objectSpread2({
|
|
4373
|
+
'.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 "]))),
|
|
4374
|
+
'.offcanvas-text': css(_templateObject2$s || (_templateObject2$s = _taggedTemplateLiteral(["\n color: $offcanvas-color;\n "]))),
|
|
4375
|
+
'.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 "]))),
|
|
4376
|
+
'.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 "]))),
|
|
4377
|
+
'.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 "]))),
|
|
4378
|
+
'.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 "]))),
|
|
4379
|
+
'.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 "])))
|
|
4340
4380
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4341
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .offcanvas"), css(_templateObject8$
|
|
4381
|
+
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)));
|
|
4342
4382
|
})));
|
|
4343
4383
|
var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4344
4384
|
var children = props.children,
|
|
@@ -4349,13 +4389,13 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4349
4389
|
backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
|
|
4350
4390
|
handleToggle = props.onToggle,
|
|
4351
4391
|
style = props.style,
|
|
4352
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4392
|
+
elementProps = _objectWithoutProperties(props, _excluded$N);
|
|
4353
4393
|
|
|
4354
4394
|
var media = useMedia();
|
|
4355
4395
|
var navbar = useContext(NavbarContext);
|
|
4356
|
-
var backdropClasses = getStyles(styles$
|
|
4357
|
-
var classes = getStyles(styles$
|
|
4358
|
-
var textClasses = getStyles(styles$
|
|
4396
|
+
var backdropClasses = getStyles(styles$D, ['.offcanvas-backdrop']);
|
|
4397
|
+
var classes = getStyles(styles$D, ['.offcanvas', ".offcanvas-".concat(placement), navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .offcanvas")]);
|
|
4398
|
+
var textClasses = getStyles(styles$D, ['.offcanvas-content-text']); // Render children without modal for navbar.
|
|
4359
4399
|
|
|
4360
4400
|
if (navbar && navbar.expand && (navbar.expand === true || media.up(navbar.expand))) {
|
|
4361
4401
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
@@ -4380,7 +4420,7 @@ var Offcanvas = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4380
4420
|
}, children)));
|
|
4381
4421
|
});
|
|
4382
4422
|
Offcanvas.displayName = 'Offcanvas';
|
|
4383
|
-
Offcanvas.propTypes = propTypes$
|
|
4423
|
+
Offcanvas.propTypes = propTypes$N;
|
|
4384
4424
|
Offcanvas.Header = OffcanvasHeader;
|
|
4385
4425
|
Offcanvas.Title = OffcanvasTitle;
|
|
4386
4426
|
Offcanvas.Body = OffcanvasBody;
|
|
@@ -4388,15 +4428,15 @@ Offcanvas.Body = OffcanvasBody;
|
|
|
4388
4428
|
var PickerContext = /*#__PURE__*/React.createContext();
|
|
4389
4429
|
PickerContext.displayName = 'PickerContext';
|
|
4390
4430
|
|
|
4391
|
-
var _templateObject$
|
|
4392
|
-
var propTypes$
|
|
4431
|
+
var _templateObject$D, _templateObject2$r;
|
|
4432
|
+
var propTypes$M = {
|
|
4393
4433
|
label: PropTypes.string.isRequired,
|
|
4394
4434
|
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
|
|
4395
4435
|
disabled: PropTypes.bool
|
|
4396
4436
|
};
|
|
4397
|
-
var styles$
|
|
4398
|
-
'.form-select-item': css(_templateObject$
|
|
4399
|
-
'.form-select-item-disabled': css(_templateObject2$
|
|
4437
|
+
var styles$C = StyleSheet.create({
|
|
4438
|
+
'.form-select-item': css(_templateObject$D || (_templateObject$D = _taggedTemplateLiteral(["\n margin: 0.25rem 1rem;\n padding: 0.25rem;\n "]))),
|
|
4439
|
+
'.form-select-item-disabled': css(_templateObject2$r || (_templateObject2$r = _taggedTemplateLiteral([""])))
|
|
4400
4440
|
});
|
|
4401
4441
|
var PickerItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4402
4442
|
var label = props.label,
|
|
@@ -4418,7 +4458,7 @@ var PickerItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4418
4458
|
}));
|
|
4419
4459
|
}
|
|
4420
4460
|
|
|
4421
|
-
var classes = getStyles(styles$
|
|
4461
|
+
var classes = getStyles(styles$C, ['.form-select-item', disabled && '.form-select-item-disabled']);
|
|
4422
4462
|
var resolveStyle = useStyle(classes);
|
|
4423
4463
|
var selected = value === context.value;
|
|
4424
4464
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, commonProps, {
|
|
@@ -4435,12 +4475,12 @@ var PickerItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4435
4475
|
}, label));
|
|
4436
4476
|
});
|
|
4437
4477
|
PickerItem.displayName = 'PickerItem';
|
|
4438
|
-
PickerItem.propTypes = propTypes$
|
|
4478
|
+
PickerItem.propTypes = propTypes$M;
|
|
4439
4479
|
|
|
4440
|
-
var _excluded$
|
|
4480
|
+
var _excluded$M = ["children", "value", "onChange", "onFocus", "onBlur", "placeholder", "size", "disabled", "valid", "invalid", "useNativeComponent", "style", "styleName"];
|
|
4441
4481
|
|
|
4442
|
-
var _templateObject$
|
|
4443
|
-
var propTypes$
|
|
4482
|
+
var _templateObject$C, _templateObject2$q, _templateObject3$e, _templateObject4$c, _templateObject5$a, _templateObject6$9, _templateObject7$7;
|
|
4483
|
+
var propTypes$L = {
|
|
4444
4484
|
children: PropTypes.node.isRequired,
|
|
4445
4485
|
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
|
|
4446
4486
|
onChange: PropTypes.func,
|
|
@@ -4457,20 +4497,20 @@ var propTypes$I = {
|
|
|
4457
4497
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4458
4498
|
styleName: PropTypes.any
|
|
4459
4499
|
};
|
|
4460
|
-
var styles$
|
|
4461
|
-
'.form-select': css(_templateObject$
|
|
4462
|
-
'.form-select-disabled': css(_templateObject2$
|
|
4463
|
-
'.form-select-sm': css(_templateObject3$
|
|
4464
|
-
'.form-select-lg': css(_templateObject4$
|
|
4500
|
+
var styles$B = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
4501
|
+
'.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 "]))),
|
|
4502
|
+
'.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 "]))),
|
|
4503
|
+
'.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 "]))),
|
|
4504
|
+
'.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 "])))
|
|
4465
4505
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4466
|
-
return _defineProperty({}, ".form-select.is-".concat(state), css(_templateObject5$
|
|
4506
|
+
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) {
|
|
4467
4507
|
return data(t).color;
|
|
4468
4508
|
}, function (t) {
|
|
4469
4509
|
return data(t).color;
|
|
4470
4510
|
}));
|
|
4471
4511
|
})), {}, {
|
|
4472
|
-
'.form-select-offcanvas': css(_templateObject6$
|
|
4473
|
-
'.form-select-offcanvas-body': css(_templateObject7$
|
|
4512
|
+
'.form-select-offcanvas': css(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteral([""]))),
|
|
4513
|
+
'.form-select-offcanvas-body': css(_templateObject7$7 || (_templateObject7$7 = _taggedTemplateLiteral(["\n align-items: center;\n "])))
|
|
4474
4514
|
}));
|
|
4475
4515
|
var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4476
4516
|
var children = props.children,
|
|
@@ -4493,7 +4533,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4493
4533
|
useNativeComponent = _props$useNativeCompo === void 0 ? false : _props$useNativeCompo,
|
|
4494
4534
|
style = props.style,
|
|
4495
4535
|
styleName = props.styleName,
|
|
4496
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4536
|
+
elementProps = _objectWithoutProperties(props, _excluded$M);
|
|
4497
4537
|
|
|
4498
4538
|
var _useState = useState(false),
|
|
4499
4539
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -4506,7 +4546,7 @@ var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4506
4546
|
setOpen = _useState4[1];
|
|
4507
4547
|
|
|
4508
4548
|
var media = useMedia();
|
|
4509
|
-
var classes = getStyles(styles$
|
|
4549
|
+
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']);
|
|
4510
4550
|
var resolveStyle = useStyle([classes, style], styleName);
|
|
4511
4551
|
var provideWebComponent = Platform.OS === 'web' && !useNativeComponent;
|
|
4512
4552
|
var commonProps = {
|
|
@@ -4543,8 +4583,8 @@ var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4543
4583
|
}, placeholder), children);
|
|
4544
4584
|
}
|
|
4545
4585
|
|
|
4546
|
-
var offcanvasClasses = getStyles(styles$
|
|
4547
|
-
var offcanvasBodyClasses = getStyles(styles$
|
|
4586
|
+
var offcanvasClasses = getStyles(styles$B, ['.form-select-offcanvas']);
|
|
4587
|
+
var offcanvasBodyClasses = getStyles(styles$B, ['.form-select-offcanvas-body']);
|
|
4548
4588
|
var items = React.Children.map(children, function (child) {
|
|
4549
4589
|
return {
|
|
4550
4590
|
label: child.props.label,
|
|
@@ -4588,14 +4628,14 @@ var Picker = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4588
4628
|
}, children)));
|
|
4589
4629
|
});
|
|
4590
4630
|
Picker.displayName = 'Picker';
|
|
4591
|
-
Picker.propTypes = propTypes$
|
|
4631
|
+
Picker.propTypes = propTypes$L;
|
|
4592
4632
|
Picker.Item = PickerItem;
|
|
4593
4633
|
|
|
4594
4634
|
var RadioContext = /*#__PURE__*/React.createContext();
|
|
4595
4635
|
RadioContext.displayName = 'RadioContext';
|
|
4596
4636
|
|
|
4597
|
-
var _excluded$
|
|
4598
|
-
var propTypes$
|
|
4637
|
+
var _excluded$L = ["children", "value", "onChange", "disabled"];
|
|
4638
|
+
var propTypes$K = {
|
|
4599
4639
|
children: PropTypes.node.isRequired,
|
|
4600
4640
|
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
|
|
4601
4641
|
onChange: PropTypes.func,
|
|
@@ -4608,7 +4648,7 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4608
4648
|
onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
|
|
4609
4649
|
_props$disabled = props.disabled,
|
|
4610
4650
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
4611
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4651
|
+
elementProps = _objectWithoutProperties(props, _excluded$L);
|
|
4612
4652
|
|
|
4613
4653
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4614
4654
|
ref: ref,
|
|
@@ -4622,15 +4662,15 @@ var RadioGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4622
4662
|
}, children));
|
|
4623
4663
|
});
|
|
4624
4664
|
RadioGroup.displayName = 'RadioGroup';
|
|
4625
|
-
RadioGroup.propTypes = propTypes$
|
|
4665
|
+
RadioGroup.propTypes = propTypes$K;
|
|
4626
4666
|
|
|
4627
|
-
var _excluded$
|
|
4628
|
-
var propTypes$
|
|
4667
|
+
var _excluded$K = ["value"];
|
|
4668
|
+
var propTypes$J = {
|
|
4629
4669
|
value: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string])
|
|
4630
4670
|
};
|
|
4631
4671
|
var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4632
4672
|
var value = props.value,
|
|
4633
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4673
|
+
elementProps = _objectWithoutProperties(props, _excluded$K);
|
|
4634
4674
|
|
|
4635
4675
|
var context = useForcedContext(RadioContext);
|
|
4636
4676
|
return /*#__PURE__*/React.createElement(CheckInput, _extends({}, elementProps, {
|
|
@@ -4644,7 +4684,7 @@ var Radio = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4644
4684
|
}));
|
|
4645
4685
|
});
|
|
4646
4686
|
Radio.displayName = 'Radio';
|
|
4647
|
-
Radio.propTypes = propTypes$
|
|
4687
|
+
Radio.propTypes = propTypes$J;
|
|
4648
4688
|
Radio.Group = RadioGroup;
|
|
4649
4689
|
|
|
4650
4690
|
var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -4657,8 +4697,8 @@ var Switch = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4657
4697
|
});
|
|
4658
4698
|
Switch.displayName = 'Switch';
|
|
4659
4699
|
|
|
4660
|
-
var _excluded$
|
|
4661
|
-
var propTypes$
|
|
4700
|
+
var _excluded$J = ["onFocus", "onBlur", "style", "styleName"];
|
|
4701
|
+
var propTypes$I = {
|
|
4662
4702
|
onFocus: PropTypes.func,
|
|
4663
4703
|
onBlur: PropTypes.func,
|
|
4664
4704
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -4673,7 +4713,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4673
4713
|
_onBlur = _props$onBlur === void 0 ? function () {} : _props$onBlur,
|
|
4674
4714
|
style = props.style,
|
|
4675
4715
|
styleName = props.styleName,
|
|
4676
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4716
|
+
elementProps = _objectWithoutProperties(props, _excluded$J);
|
|
4677
4717
|
|
|
4678
4718
|
var _useState = useState(false),
|
|
4679
4719
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -4703,12 +4743,12 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4703
4743
|
}));
|
|
4704
4744
|
});
|
|
4705
4745
|
TextInput.displayName = 'TextInput';
|
|
4706
|
-
TextInput.propTypes = propTypes$
|
|
4746
|
+
TextInput.propTypes = propTypes$I;
|
|
4707
4747
|
|
|
4708
|
-
var _excluded$
|
|
4748
|
+
var _excluded$I = ["size", "placeholderTextColor", "multiline", "disabled", "valid", "invalid", "style"];
|
|
4709
4749
|
|
|
4710
|
-
var _templateObject$
|
|
4711
|
-
var propTypes$
|
|
4750
|
+
var _templateObject$B, _templateObject2$p, _templateObject3$d, _templateObject4$b, _templateObject5$9, _templateObject6$8, _templateObject7$6, _templateObject8$6;
|
|
4751
|
+
var propTypes$H = {
|
|
4712
4752
|
size: PropTypes.oneOf(['sm', 'lg']),
|
|
4713
4753
|
placeholderTextColor: PropTypes.string,
|
|
4714
4754
|
multiline: PropTypes.bool,
|
|
@@ -4718,16 +4758,16 @@ var propTypes$E = {
|
|
|
4718
4758
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4719
4759
|
style: PropTypes.any
|
|
4720
4760
|
};
|
|
4721
|
-
var styles$
|
|
4722
|
-
'.form-control': css(_templateObject$
|
|
4723
|
-
'.form-control-disabled': css(_templateObject2$
|
|
4724
|
-
'.form-control-sm': css(_templateObject3$
|
|
4725
|
-
'.form-control-lg': css(_templateObject4$
|
|
4726
|
-
'.form-control-multiline': css(_templateObject5$
|
|
4727
|
-
'.form-control-multiline-sm': css(_templateObject6$
|
|
4728
|
-
'.form-control-multiline-lg': css(_templateObject7$
|
|
4761
|
+
var styles$A = StyleSheet.create(_objectSpread2({
|
|
4762
|
+
'.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 "]))),
|
|
4763
|
+
'.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 "]))),
|
|
4764
|
+
'.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 "]))),
|
|
4765
|
+
'.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 "]))),
|
|
4766
|
+
'.form-control-multiline': css(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteral(["\n min-height: $input-height;\n "]))),
|
|
4767
|
+
'.form-control-multiline-sm': css(_templateObject6$8 || (_templateObject6$8 = _taggedTemplateLiteral(["\n min-height: $input-height-sm;\n "]))),
|
|
4768
|
+
'.form-control-multiline-lg': css(_templateObject7$6 || (_templateObject7$6 = _taggedTemplateLiteral(["\n min-height: $input-height-lg;\n "])))
|
|
4729
4769
|
}, each(FORM_VALIDATION_STATES, function (state, data) {
|
|
4730
|
-
return _defineProperty({}, ".form-control.is-".concat(state), css(_templateObject8$
|
|
4770
|
+
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) {
|
|
4731
4771
|
return data(t).color;
|
|
4732
4772
|
}, function (t) {
|
|
4733
4773
|
return data(t).color;
|
|
@@ -4745,9 +4785,9 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4745
4785
|
_props$invalid = props.invalid,
|
|
4746
4786
|
invalid = _props$invalid === void 0 ? false : _props$invalid,
|
|
4747
4787
|
style = props.style,
|
|
4748
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4788
|
+
elementProps = _objectWithoutProperties(props, _excluded$I);
|
|
4749
4789
|
|
|
4750
|
-
var classes = getStyles(styles$
|
|
4790
|
+
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']);
|
|
4751
4791
|
return /*#__PURE__*/React.createElement(TextInput, _extends({}, elementProps, {
|
|
4752
4792
|
ref: ref,
|
|
4753
4793
|
placeholderTextColor: placeholderTextColor || StyleSheet.value('input-placeholder-color'),
|
|
@@ -4757,40 +4797,40 @@ var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4757
4797
|
}));
|
|
4758
4798
|
});
|
|
4759
4799
|
Input.displayName = 'Input';
|
|
4760
|
-
Input.propTypes = propTypes$
|
|
4800
|
+
Input.propTypes = propTypes$H;
|
|
4761
4801
|
|
|
4762
|
-
var _excluded$
|
|
4802
|
+
var _excluded$H = ["children", "style"];
|
|
4763
4803
|
|
|
4764
|
-
var _templateObject$
|
|
4765
|
-
var propTypes$
|
|
4804
|
+
var _templateObject$A;
|
|
4805
|
+
var propTypes$G = {
|
|
4766
4806
|
children: PropTypes.node.isRequired,
|
|
4767
4807
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4768
4808
|
style: PropTypes.any
|
|
4769
4809
|
};
|
|
4770
|
-
var styles$
|
|
4771
|
-
'.form-label': css(_templateObject$
|
|
4810
|
+
var styles$z = StyleSheet.create({
|
|
4811
|
+
'.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 "])))
|
|
4772
4812
|
});
|
|
4773
4813
|
var Label = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4774
4814
|
var children = props.children,
|
|
4775
4815
|
style = props.style,
|
|
4776
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4816
|
+
elementProps = _objectWithoutProperties(props, _excluded$H);
|
|
4777
4817
|
|
|
4778
|
-
var classes = getStyles(styles$
|
|
4818
|
+
var classes = getStyles(styles$z, ['.form-label']);
|
|
4779
4819
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
4780
4820
|
ref: ref,
|
|
4781
4821
|
style: [classes, style]
|
|
4782
4822
|
}), children);
|
|
4783
4823
|
});
|
|
4784
4824
|
Label.displayName = 'Label';
|
|
4785
|
-
Label.propTypes = propTypes$
|
|
4825
|
+
Label.propTypes = propTypes$G;
|
|
4786
4826
|
|
|
4787
|
-
var _excluded$
|
|
4827
|
+
var _excluded$G = ["children", "size", "sizeSm", "sizeMd", "sizeLg", "sizeXl", "style"];
|
|
4788
4828
|
|
|
4789
|
-
var _templateObject$
|
|
4829
|
+
var _templateObject$z, _templateObject2$o, _templateObject3$c, _templateObject4$a, _templateObject5$8;
|
|
4790
4830
|
var sizes = makeArray(GRID_COLUMNS).map(function (v) {
|
|
4791
4831
|
return v + 1;
|
|
4792
4832
|
});
|
|
4793
|
-
var propTypes$
|
|
4833
|
+
var propTypes$F = {
|
|
4794
4834
|
children: PropTypes.node.isRequired,
|
|
4795
4835
|
size: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
|
|
4796
4836
|
sizeSm: PropTypes.oneOf(['auto'].concat(_toConsumableArray(sizes))),
|
|
@@ -4800,15 +4840,15 @@ var propTypes$C = {
|
|
|
4800
4840
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4801
4841
|
style: PropTypes.any
|
|
4802
4842
|
};
|
|
4803
|
-
var styles$
|
|
4804
|
-
'*': css(_templateObject$
|
|
4843
|
+
var styles$y = StyleSheet.create(_objectSpread2({
|
|
4844
|
+
'*': 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 "])))
|
|
4805
4845
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
4806
4846
|
var _objectSpread2$1;
|
|
4807
4847
|
|
|
4808
|
-
return _objectSpread2((_objectSpread2$1 = {}, _defineProperty(_objectSpread2$1, ".col".concat(infix(breakpoint)), css(_templateObject2$
|
|
4848
|
+
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) {
|
|
4809
4849
|
var _ref;
|
|
4810
4850
|
|
|
4811
|
-
return _ref = {}, _defineProperty(_ref, ".col".concat(infix(breakpoint), "-").concat(i + 1), css(_templateObject4$
|
|
4851
|
+
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;
|
|
4812
4852
|
})));
|
|
4813
4853
|
})));
|
|
4814
4854
|
var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -4819,50 +4859,50 @@ var Col = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4819
4859
|
sizeLg = props.sizeLg,
|
|
4820
4860
|
sizeXl = props.sizeXl,
|
|
4821
4861
|
style = props.style,
|
|
4822
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4862
|
+
elementProps = _objectWithoutProperties(props, _excluded$G);
|
|
4823
4863
|
|
|
4824
|
-
var classes = getStyles(styles$
|
|
4864
|
+
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())]);
|
|
4825
4865
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4826
4866
|
ref: ref,
|
|
4827
4867
|
style: [classes, style]
|
|
4828
4868
|
}), children);
|
|
4829
4869
|
});
|
|
4830
4870
|
Col.displayName = 'Col';
|
|
4831
|
-
Col.propTypes = propTypes$
|
|
4871
|
+
Col.propTypes = propTypes$F;
|
|
4832
4872
|
|
|
4833
|
-
var _excluded$
|
|
4873
|
+
var _excluded$F = ["children", "style"];
|
|
4834
4874
|
|
|
4835
|
-
var _templateObject$
|
|
4836
|
-
var propTypes$
|
|
4875
|
+
var _templateObject$y;
|
|
4876
|
+
var propTypes$E = {
|
|
4837
4877
|
children: PropTypes.node.isRequired,
|
|
4838
4878
|
rows: PropTypes.number,
|
|
4839
4879
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4840
4880
|
style: PropTypes.any
|
|
4841
4881
|
};
|
|
4842
|
-
var styles$
|
|
4843
|
-
'.row': css(_templateObject$
|
|
4882
|
+
var styles$x = StyleSheet.create({
|
|
4883
|
+
'.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 "])))
|
|
4844
4884
|
});
|
|
4845
4885
|
var Row = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4846
4886
|
var children = props.children,
|
|
4847
4887
|
style = props.style,
|
|
4848
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4888
|
+
elementProps = _objectWithoutProperties(props, _excluded$F);
|
|
4849
4889
|
|
|
4850
|
-
var classes = getStyles(styles$
|
|
4890
|
+
var classes = getStyles(styles$x, ['.row']);
|
|
4851
4891
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4852
4892
|
ref: ref,
|
|
4853
4893
|
style: [classes, style]
|
|
4854
4894
|
}), children);
|
|
4855
4895
|
});
|
|
4856
4896
|
Row.displayName = 'Row';
|
|
4857
|
-
Row.propTypes = propTypes$
|
|
4897
|
+
Row.propTypes = propTypes$E;
|
|
4858
4898
|
|
|
4859
4899
|
var ListGroupContext = /*#__PURE__*/React.createContext();
|
|
4860
4900
|
ListGroupContext.displayName = 'ListGroupContext';
|
|
4861
4901
|
|
|
4862
|
-
var _excluded$
|
|
4902
|
+
var _excluded$E = ["children", "color", "active", "first", "last", "disabled", "style"];
|
|
4863
4903
|
|
|
4864
|
-
var _templateObject$
|
|
4865
|
-
var propTypes$
|
|
4904
|
+
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;
|
|
4905
|
+
var propTypes$D = {
|
|
4866
4906
|
children: PropTypes.node.isRequired,
|
|
4867
4907
|
color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
|
|
4868
4908
|
active: PropTypes.bool,
|
|
@@ -4872,25 +4912,25 @@ var propTypes$A = {
|
|
|
4872
4912
|
// eslint-disable-next-line react/forbid-prop-types
|
|
4873
4913
|
style: PropTypes.any
|
|
4874
4914
|
};
|
|
4875
|
-
var styles$
|
|
4876
|
-
'.list-group-item': css(_templateObject$
|
|
4877
|
-
'.list-group-item-text': css(_templateObject2$
|
|
4878
|
-
'.list-group-item-first': css(_templateObject3$
|
|
4879
|
-
'.list-group-item-last': css(_templateObject4$
|
|
4880
|
-
'.list-group-item-disabled': css(_templateObject5$
|
|
4881
|
-
'.list-group-item-disabled-text': css(_templateObject6$
|
|
4882
|
-
'.list-group-item-active': css(_templateObject7$
|
|
4883
|
-
'.list-group-item-active-text': css(_templateObject8$
|
|
4884
|
-
'.list-group-item-not-first': css(_templateObject9$
|
|
4885
|
-
'.list-group-item-not-first-active': css(_templateObject10$
|
|
4886
|
-
'.list-group-item-flush': css(_templateObject11$
|
|
4887
|
-
'.list-group-item-flush-last': css(_templateObject12$
|
|
4915
|
+
var styles$w = StyleSheet.create(_objectSpread2({
|
|
4916
|
+
'.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 "]))),
|
|
4917
|
+
'.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 "]))),
|
|
4918
|
+
'.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 "]))),
|
|
4919
|
+
'.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 "]))),
|
|
4920
|
+
'.list-group-item-disabled': css(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteral(["\n // pointer-events: none;\n background-color: $list-group-disabled-bg;\n "]))),
|
|
4921
|
+
'.list-group-item-disabled-text': css(_templateObject6$7 || (_templateObject6$7 = _taggedTemplateLiteral(["\n color: $list-group-disabled-color;\n "]))),
|
|
4922
|
+
'.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 "]))),
|
|
4923
|
+
'.list-group-item-active-text': css(_templateObject8$5 || (_templateObject8$5 = _taggedTemplateLiteral(["\n color: $list-group-active-color;\n "]))),
|
|
4924
|
+
'.list-group-item-not-first': css(_templateObject9$3 || (_templateObject9$3 = _taggedTemplateLiteral(["\n border-top-width: 0;\n "]))),
|
|
4925
|
+
'.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 "]))),
|
|
4926
|
+
'.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 "]))),
|
|
4927
|
+
'.list-group-item-flush-last': css(_templateObject12$2 || (_templateObject12$2 = _taggedTemplateLiteral(["\n border-bottom-width: 0;\n "])))
|
|
4888
4928
|
}, each(THEME_COLORS, function (state, value) {
|
|
4889
4929
|
var _ref;
|
|
4890
4930
|
|
|
4891
|
-
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$
|
|
4931
|
+
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state), css(_templateObject13$2 || (_templateObject13$2 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), function (t) {
|
|
4892
4932
|
return shiftColor(t['list-group-item-bg-scale'], value(t));
|
|
4893
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css(_templateObject14$
|
|
4933
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-text"), css(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteral(["\n color: ", ";\n "])), function (t) {
|
|
4894
4934
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4895
4935
|
})), _ref;
|
|
4896
4936
|
})));
|
|
@@ -4906,13 +4946,13 @@ var ListGroupItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4906
4946
|
_props$disabled = props.disabled,
|
|
4907
4947
|
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
4908
4948
|
style = props.style,
|
|
4909
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
4949
|
+
elementProps = _objectWithoutProperties(props, _excluded$E);
|
|
4910
4950
|
|
|
4911
4951
|
var _useForcedContext = useForcedContext(ListGroupContext),
|
|
4912
4952
|
flush = _useForcedContext.flush;
|
|
4913
4953
|
|
|
4914
|
-
var classes = getStyles(styles$
|
|
4915
|
-
var textClasses = getStyles(styles$
|
|
4954
|
+
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)]);
|
|
4955
|
+
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")]);
|
|
4916
4956
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
4917
4957
|
ref: ref,
|
|
4918
4958
|
style: [classes, style]
|
|
@@ -4921,12 +4961,12 @@ var ListGroupItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4921
4961
|
}, children));
|
|
4922
4962
|
});
|
|
4923
4963
|
ListGroupItem.displayName = 'ListGroupItem';
|
|
4924
|
-
ListGroupItem.propTypes = propTypes$
|
|
4964
|
+
ListGroupItem.propTypes = propTypes$D;
|
|
4925
4965
|
|
|
4926
|
-
var _excluded$
|
|
4966
|
+
var _excluded$D = ["children", "color", "first", "last", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
4927
4967
|
|
|
4928
|
-
var _templateObject$
|
|
4929
|
-
var propTypes$
|
|
4968
|
+
var _templateObject$w, _templateObject2$m, _templateObject3$a, _templateObject4$8, _templateObject5$6, _templateObject6$6;
|
|
4969
|
+
var propTypes$C = {
|
|
4930
4970
|
children: PropTypes.node.isRequired,
|
|
4931
4971
|
color: PropTypes.oneOf(Object.keys(THEME_COLORS)),
|
|
4932
4972
|
first: PropTypes.bool,
|
|
@@ -4943,24 +4983,24 @@ var propTypes$z = {
|
|
|
4943
4983
|
activeTextStyle: PropTypes.any
|
|
4944
4984
|
};
|
|
4945
4985
|
var actionStyles = StyleSheet.create(_objectSpread2({
|
|
4946
|
-
'.list-group-item-action': css(_templateObject$
|
|
4947
|
-
'.list-group-item-action-text': css(_templateObject2$
|
|
4986
|
+
'.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 "]))),
|
|
4987
|
+
'.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 "])))
|
|
4948
4988
|
}, each(THEME_COLORS, function (state, value) {
|
|
4949
4989
|
var _ref;
|
|
4950
4990
|
|
|
4951
|
-
return _ref = {}, _defineProperty(_ref, ".list-group-item-".concat(state, "-action"), css(_templateObject3$
|
|
4991
|
+
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) {
|
|
4952
4992
|
return shadeColor(0.1, shiftColor(t['list-group-item-bg-scale'], value(t)));
|
|
4953
4993
|
}, function (t) {
|
|
4954
4994
|
return shadeColor(0.1, shiftColor(t['list-group-item-bg-scale'], value(t)));
|
|
4955
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-text"), css(_templateObject4$
|
|
4995
|
+
})), _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) {
|
|
4956
4996
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4957
4997
|
}, function (t) {
|
|
4958
4998
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4959
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active"), css(_templateObject5$
|
|
4999
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active"), css(_templateObject5$6 || (_templateObject5$6 = _taggedTemplateLiteral(["\n background-color: ", ";\n border-color: ", ";\n "])), function (t) {
|
|
4960
5000
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4961
5001
|
}, function (t) {
|
|
4962
5002
|
return shiftColor(t['list-group-item-color-scale'], value(t));
|
|
4963
|
-
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active-text"), css(_templateObject6$
|
|
5003
|
+
})), _defineProperty(_ref, ".list-group-item-".concat(state, "-action-active-text"), css(_templateObject6$6 || (_templateObject6$6 = _taggedTemplateLiteral(["\n color: $white;\n "])))), _ref;
|
|
4964
5004
|
})));
|
|
4965
5005
|
var ListGroupItemAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
4966
5006
|
var _useModifier = useModifier('useTabbable', props, ref),
|
|
@@ -4982,12 +5022,12 @@ var ListGroupItemAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
4982
5022
|
activeStyle = modifierProps.activeStyle,
|
|
4983
5023
|
textStyle = modifierProps.textStyle,
|
|
4984
5024
|
activeTextStyle = modifierProps.activeTextStyle,
|
|
4985
|
-
elementProps = _objectWithoutProperties(modifierProps, _excluded$
|
|
5025
|
+
elementProps = _objectWithoutProperties(modifierProps, _excluded$D);
|
|
4986
5026
|
|
|
4987
5027
|
var _useForcedContext = useForcedContext(ListGroupContext),
|
|
4988
5028
|
flush = _useForcedContext.flush;
|
|
4989
5029
|
|
|
4990
|
-
var styles = _objectSpread2(_objectSpread2({}, styles$
|
|
5030
|
+
var styles = _objectSpread2(_objectSpread2({}, styles$w), actionStyles);
|
|
4991
5031
|
|
|
4992
5032
|
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")]);
|
|
4993
5033
|
var activeClasses = getStyles(styles, ['.list-group-item-active', color && ".list-group-item-".concat(color, "-action-active")]);
|
|
@@ -5004,28 +5044,28 @@ var ListGroupItemAction = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5004
5044
|
}), children);
|
|
5005
5045
|
});
|
|
5006
5046
|
ListGroupItemAction.displayName = 'ListGroupItemAction';
|
|
5007
|
-
ListGroupItemAction.propTypes = propTypes$
|
|
5047
|
+
ListGroupItemAction.propTypes = propTypes$C;
|
|
5008
5048
|
|
|
5009
|
-
var _excluded$
|
|
5049
|
+
var _excluded$C = ["children", "flush", "style"];
|
|
5010
5050
|
|
|
5011
|
-
var _templateObject$
|
|
5012
|
-
var propTypes$
|
|
5051
|
+
var _templateObject$v, _templateObject2$l;
|
|
5052
|
+
var propTypes$B = {
|
|
5013
5053
|
children: PropTypes.node.isRequired,
|
|
5014
5054
|
flush: PropTypes.bool,
|
|
5015
5055
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5016
5056
|
style: PropTypes.any
|
|
5017
5057
|
};
|
|
5018
|
-
var styles$
|
|
5019
|
-
'.list-group': css(_templateObject$
|
|
5020
|
-
'.list-group-flush': css(_templateObject2$
|
|
5058
|
+
var styles$v = StyleSheet.create({
|
|
5059
|
+
'.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 "]))),
|
|
5060
|
+
'.list-group-flush': css(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteral(["\n border-radius: 0;\n "])))
|
|
5021
5061
|
});
|
|
5022
5062
|
var ListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5023
5063
|
var children = props.children,
|
|
5024
5064
|
flush = props.flush,
|
|
5025
5065
|
style = props.style,
|
|
5026
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5066
|
+
elementProps = _objectWithoutProperties(props, _excluded$C);
|
|
5027
5067
|
|
|
5028
|
-
var classes = getStyles(styles$
|
|
5068
|
+
var classes = getStyles(styles$v, ['.list-group', flush && '.list-group-flush']); // TODO: Implement TabContext
|
|
5029
5069
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5030
5070
|
ref: ref,
|
|
5031
5071
|
accessibilityRole: null,
|
|
@@ -5037,52 +5077,52 @@ var ListGroup = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5037
5077
|
}, makeListChildren(children)));
|
|
5038
5078
|
});
|
|
5039
5079
|
ListGroup.displayName = 'ListGroup';
|
|
5040
|
-
ListGroup.propTypes = propTypes$
|
|
5080
|
+
ListGroup.propTypes = propTypes$B;
|
|
5041
5081
|
ListGroup.Item = ListGroupItem;
|
|
5042
5082
|
ListGroup.ItemAction = ListGroupItemAction;
|
|
5043
5083
|
|
|
5044
|
-
var _excluded$
|
|
5084
|
+
var _excluded$B = ["children", "style"];
|
|
5045
5085
|
|
|
5046
|
-
var _templateObject$
|
|
5047
|
-
var propTypes$
|
|
5086
|
+
var _templateObject$u;
|
|
5087
|
+
var propTypes$A = {
|
|
5048
5088
|
children: PropTypes.node.isRequired,
|
|
5049
5089
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5050
5090
|
style: PropTypes.any
|
|
5051
5091
|
};
|
|
5052
|
-
var styles$
|
|
5053
|
-
'.modal-header': css(_templateObject$
|
|
5092
|
+
var styles$u = StyleSheet.create({
|
|
5093
|
+
'.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 "])))
|
|
5054
5094
|
});
|
|
5055
5095
|
var ModalHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5056
5096
|
var children = props.children,
|
|
5057
5097
|
style = props.style,
|
|
5058
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5098
|
+
elementProps = _objectWithoutProperties(props, _excluded$B);
|
|
5059
5099
|
|
|
5060
|
-
var classes = getStyles(styles$
|
|
5100
|
+
var classes = getStyles(styles$u, ['.modal-header']);
|
|
5061
5101
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5062
5102
|
ref: ref,
|
|
5063
5103
|
style: [classes, style]
|
|
5064
5104
|
}), children);
|
|
5065
5105
|
});
|
|
5066
5106
|
ModalHeader.displayName = 'ModalHeader';
|
|
5067
|
-
ModalHeader.propTypes = propTypes$
|
|
5107
|
+
ModalHeader.propTypes = propTypes$A;
|
|
5068
5108
|
|
|
5069
|
-
var _excluded$
|
|
5109
|
+
var _excluded$A = ["children", "style"];
|
|
5070
5110
|
|
|
5071
|
-
var _templateObject$
|
|
5072
|
-
var propTypes$
|
|
5111
|
+
var _templateObject$t;
|
|
5112
|
+
var propTypes$z = {
|
|
5073
5113
|
children: PropTypes.node.isRequired,
|
|
5074
5114
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5075
5115
|
style: PropTypes.any
|
|
5076
5116
|
};
|
|
5077
|
-
var styles$
|
|
5078
|
-
'.modal-title': css(_templateObject$
|
|
5117
|
+
var styles$t = StyleSheet.create({
|
|
5118
|
+
'.modal-title': css(_templateObject$t || (_templateObject$t = _taggedTemplateLiteral(["\n margin-bottom: 0;\n line-height: $font-size-base * $modal-title-line-height;\n "])))
|
|
5079
5119
|
});
|
|
5080
5120
|
var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5081
5121
|
var children = props.children,
|
|
5082
5122
|
style = props.style,
|
|
5083
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5123
|
+
elementProps = _objectWithoutProperties(props, _excluded$A);
|
|
5084
5124
|
|
|
5085
|
-
var classes = getStyles(styles$
|
|
5125
|
+
var classes = getStyles(styles$t, ['.modal-title']);
|
|
5086
5126
|
return /*#__PURE__*/React.createElement(Heading$1, _extends({
|
|
5087
5127
|
size: 5
|
|
5088
5128
|
}, elementProps, {
|
|
@@ -5091,63 +5131,63 @@ var ModalTitle = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5091
5131
|
}), children);
|
|
5092
5132
|
});
|
|
5093
5133
|
ModalTitle.displayName = 'ModalTitle';
|
|
5094
|
-
ModalTitle.propTypes = propTypes$
|
|
5134
|
+
ModalTitle.propTypes = propTypes$z;
|
|
5095
5135
|
|
|
5096
|
-
var _excluded$
|
|
5136
|
+
var _excluded$z = ["children", "style"];
|
|
5097
5137
|
|
|
5098
|
-
var _templateObject$
|
|
5099
|
-
var propTypes$
|
|
5138
|
+
var _templateObject$s;
|
|
5139
|
+
var propTypes$y = {
|
|
5100
5140
|
children: PropTypes.node.isRequired,
|
|
5101
5141
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5102
5142
|
style: PropTypes.any
|
|
5103
5143
|
};
|
|
5104
|
-
var styles$
|
|
5105
|
-
'.modal-body': css(_templateObject$
|
|
5144
|
+
var styles$s = StyleSheet.create({
|
|
5145
|
+
'.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 "])))
|
|
5106
5146
|
});
|
|
5107
5147
|
var ModalBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5108
5148
|
var children = props.children,
|
|
5109
5149
|
style = props.style,
|
|
5110
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5150
|
+
elementProps = _objectWithoutProperties(props, _excluded$z);
|
|
5111
5151
|
|
|
5112
|
-
var classes = getStyles(styles$
|
|
5152
|
+
var classes = getStyles(styles$s, ['.modal-body']);
|
|
5113
5153
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5114
5154
|
ref: ref,
|
|
5115
5155
|
style: [classes, style]
|
|
5116
5156
|
}), children);
|
|
5117
5157
|
});
|
|
5118
5158
|
ModalBody.displayName = 'ModalBody';
|
|
5119
|
-
ModalBody.propTypes = propTypes$
|
|
5159
|
+
ModalBody.propTypes = propTypes$y;
|
|
5120
5160
|
|
|
5121
|
-
var _excluded$
|
|
5161
|
+
var _excluded$y = ["children", "style"];
|
|
5122
5162
|
|
|
5123
|
-
var _templateObject$
|
|
5124
|
-
var propTypes$
|
|
5163
|
+
var _templateObject$r;
|
|
5164
|
+
var propTypes$x = {
|
|
5125
5165
|
children: PropTypes.node.isRequired,
|
|
5126
5166
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5127
5167
|
style: PropTypes.any
|
|
5128
5168
|
};
|
|
5129
|
-
var styles$
|
|
5130
|
-
'.modal-footer': css(_templateObject$
|
|
5169
|
+
var styles$r = StyleSheet.create({
|
|
5170
|
+
'.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 "])))
|
|
5131
5171
|
});
|
|
5132
5172
|
var ModalFooter = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5133
5173
|
var children = props.children,
|
|
5134
5174
|
style = props.style,
|
|
5135
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5175
|
+
elementProps = _objectWithoutProperties(props, _excluded$y);
|
|
5136
5176
|
|
|
5137
|
-
var classes = getStyles(styles$
|
|
5177
|
+
var classes = getStyles(styles$r, ['.modal-footer']);
|
|
5138
5178
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5139
5179
|
ref: ref,
|
|
5140
5180
|
style: [classes, style]
|
|
5141
5181
|
}), children);
|
|
5142
5182
|
});
|
|
5143
5183
|
ModalFooter.displayName = 'ModalFooter';
|
|
5144
|
-
ModalFooter.propTypes = propTypes$
|
|
5184
|
+
ModalFooter.propTypes = propTypes$x;
|
|
5145
5185
|
|
|
5146
|
-
var _excluded$
|
|
5186
|
+
var _excluded$x = ["children", "visible", "size", "backdrop", "onToggle", "style"];
|
|
5147
5187
|
|
|
5148
|
-
var _templateObject$
|
|
5188
|
+
var _templateObject$q, _templateObject2$k, _templateObject3$9, _templateObject4$7, _templateObject5$5, _templateObject6$5, _templateObject7$4, _templateObject8$4;
|
|
5149
5189
|
var MODAL_SIZES = ['sm', 'lg', 'xl'];
|
|
5150
|
-
var propTypes$
|
|
5190
|
+
var propTypes$w = {
|
|
5151
5191
|
children: PropTypes.node.isRequired,
|
|
5152
5192
|
visible: PropTypes.bool.isRequired,
|
|
5153
5193
|
size: PropTypes.oneOf(MODAL_SIZES),
|
|
@@ -5158,15 +5198,15 @@ var propTypes$t = {
|
|
|
5158
5198
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5159
5199
|
style: PropTypes.any
|
|
5160
5200
|
};
|
|
5161
|
-
var styles$
|
|
5162
|
-
'.modal': css(_templateObject$
|
|
5163
|
-
'.modal-dialog': css(_templateObject2$
|
|
5164
|
-
'.modal-content': css(_templateObject3$
|
|
5165
|
-
'.modal-content-text': css(_templateObject4$
|
|
5166
|
-
'.modal-backdrop': css(_templateObject5$
|
|
5167
|
-
'.modal-sm': css(_templateObject6$
|
|
5168
|
-
'.modal-lg': css(_templateObject7$
|
|
5169
|
-
'.modal-xl': css(_templateObject8$
|
|
5201
|
+
var styles$q = StyleSheet.create({
|
|
5202
|
+
'.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 "]))),
|
|
5203
|
+
'.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 "]))),
|
|
5204
|
+
'.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 "]))),
|
|
5205
|
+
'.modal-content-text': css(_templateObject4$7 || (_templateObject4$7 = _taggedTemplateLiteral(["\n color: $modal-content-color;\n "]))),
|
|
5206
|
+
'.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 "]))),
|
|
5207
|
+
'.modal-sm': css(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(sm) {\n max-width: $modal-sm;\n }\n "]))),
|
|
5208
|
+
'.modal-lg': css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteral(["\n @include media-breakpoint-up(lg) {\n max-width: $modal-lg;\n }\n "]))),
|
|
5209
|
+
'.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 "])))
|
|
5170
5210
|
});
|
|
5171
5211
|
var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5172
5212
|
var children = props.children,
|
|
@@ -5176,13 +5216,13 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5176
5216
|
backdrop = _props$backdrop === void 0 ? true : _props$backdrop,
|
|
5177
5217
|
onToggle = props.onToggle,
|
|
5178
5218
|
style = props.style,
|
|
5179
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5219
|
+
elementProps = _objectWithoutProperties(props, _excluded$x);
|
|
5180
5220
|
|
|
5181
|
-
var backdropClasses = getStyles(styles$
|
|
5182
|
-
var classes = getStyles(styles$
|
|
5183
|
-
var dialogClasses = getStyles(styles$
|
|
5184
|
-
var contentClasses = getStyles(styles$
|
|
5185
|
-
var contentTextClasses = getStyles(styles$
|
|
5221
|
+
var backdropClasses = getStyles(styles$q, ['.modal-backdrop']);
|
|
5222
|
+
var classes = getStyles(styles$q, ['.modal']);
|
|
5223
|
+
var dialogClasses = getStyles(styles$q, ['.modal-dialog', size === 'sm' && '.modal-sm', size === 'lg' && '.modal-lg', size === 'xl' && '.modal-xl']);
|
|
5224
|
+
var contentClasses = getStyles(styles$q, ['.modal-content']);
|
|
5225
|
+
var contentTextClasses = getStyles(styles$q, ['.modal-content-text']);
|
|
5186
5226
|
return /*#__PURE__*/React.createElement(Modal$1, {
|
|
5187
5227
|
transparent: true,
|
|
5188
5228
|
visible: visible,
|
|
@@ -5201,7 +5241,7 @@ var Modal = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5201
5241
|
}, children)))));
|
|
5202
5242
|
});
|
|
5203
5243
|
Modal.displayName = 'Modal';
|
|
5204
|
-
Modal.propTypes = propTypes$
|
|
5244
|
+
Modal.propTypes = propTypes$w;
|
|
5205
5245
|
Modal.Header = ModalHeader;
|
|
5206
5246
|
Modal.Title = ModalTitle;
|
|
5207
5247
|
Modal.Body = ModalBody;
|
|
@@ -5210,10 +5250,10 @@ Modal.Footer = ModalFooter;
|
|
|
5210
5250
|
var NavContext = /*#__PURE__*/React.createContext();
|
|
5211
5251
|
NavContext.displayName = 'NavContext';
|
|
5212
5252
|
|
|
5213
|
-
var _excluded$
|
|
5253
|
+
var _excluded$w = ["children", "active", "disabled", "style", "activeStyle", "textStyle", "activeTextStyle"];
|
|
5214
5254
|
|
|
5215
|
-
var _templateObject$
|
|
5216
|
-
var propTypes$
|
|
5255
|
+
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;
|
|
5256
|
+
var propTypes$v = {
|
|
5217
5257
|
children: PropTypes.node.isRequired,
|
|
5218
5258
|
active: PropTypes.bool,
|
|
5219
5259
|
disabled: PropTypes.bool,
|
|
@@ -5226,25 +5266,25 @@ var propTypes$s = {
|
|
|
5226
5266
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5227
5267
|
activeTextStyle: PropTypes.any
|
|
5228
5268
|
};
|
|
5229
|
-
var styles$
|
|
5230
|
-
'.nav-link': css(_templateObject$
|
|
5231
|
-
'.nav-link-text': css(_templateObject2$
|
|
5232
|
-
'.nav-link-disabled': css(_templateObject3$
|
|
5233
|
-
'.nav-link-disabled-text': css(_templateObject4$
|
|
5234
|
-
'.nav-tabs .nav-link': css(_templateObject5$
|
|
5235
|
-
'.nav-tabs .nav-link-disabled': css(_templateObject6$
|
|
5236
|
-
'.nav-tabs .nav-link-disabled-text': css(_templateObject7$
|
|
5237
|
-
'.nav-tabs .nav-link-active': css(_templateObject8$
|
|
5238
|
-
'.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 "]))),
|
|
5239
|
-
'.nav-pills .nav-link': css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n background: transparent; // none;\n border: 0;\n border-radius: $nav-pills-border-radius;\n "]))),
|
|
5240
|
-
'.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 "]))),
|
|
5241
|
-
'.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 "]))),
|
|
5269
|
+
var styles$p = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
5270
|
+
'.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 "]))),
|
|
5271
|
+
'.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 "]))),
|
|
5272
|
+
'.nav-link-disabled': css(_templateObject3$8 || (_templateObject3$8 = _taggedTemplateLiteral(["\n @include platform(web) {\n pointer-events: none;\n cursor: default;\n }\n "]))),
|
|
5273
|
+
'.nav-link-disabled-text': css(_templateObject4$6 || (_templateObject4$6 = _taggedTemplateLiteral(["\n color: $nav-link-disabled-color;\n "]))),
|
|
5274
|
+
'.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 "]))),
|
|
5275
|
+
'.nav-tabs .nav-link-disabled': css(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteral(["\n background-color: transparent;\n border-color: transparent;\n "]))),
|
|
5276
|
+
'.nav-tabs .nav-link-disabled-text': css(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteral(["\n color: $nav-link-disabled-color;\n "]))),
|
|
5277
|
+
'.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 "]))),
|
|
5278
|
+
'.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 "]))),
|
|
5279
|
+
'.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 "]))),
|
|
5280
|
+
'.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 "]))),
|
|
5281
|
+
'.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 "]))),
|
|
5242
5282
|
// Navbar styles
|
|
5243
|
-
'.navbar-nav .nav-link': css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n padding-right: 0;\n padding-left: 0;\n "])))
|
|
5283
|
+
'.navbar-nav .nav-link': css(_templateObject13$1 || (_templateObject13$1 = _taggedTemplateLiteral(["\n padding-right: 0;\n padding-left: 0;\n "])))
|
|
5244
5284
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5245
|
-
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)));
|
|
5285
|
+
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)));
|
|
5246
5286
|
})), {}, {
|
|
5247
|
-
'.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 "]))),
|
|
5287
|
+
'.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 "]))),
|
|
5248
5288
|
'.navbar-light .navbar-nav .nav-link-disabled-text': css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: $navbar-light-disabled-color;\n "]))),
|
|
5249
5289
|
'.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 "]))),
|
|
5250
5290
|
'.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 "]))),
|
|
@@ -5264,19 +5304,19 @@ var NavLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5264
5304
|
activeStyle = modifierProps.activeStyle,
|
|
5265
5305
|
textStyle = modifierProps.textStyle,
|
|
5266
5306
|
activeTextStyle = modifierProps.activeTextStyle,
|
|
5267
|
-
elementProps = _objectWithoutProperties(modifierProps, _excluded$
|
|
5307
|
+
elementProps = _objectWithoutProperties(modifierProps, _excluded$w);
|
|
5268
5308
|
|
|
5269
5309
|
var _useForcedContext = useForcedContext(NavContext),
|
|
5270
5310
|
variant = _useForcedContext.variant;
|
|
5271
5311
|
|
|
5272
5312
|
var navbar = useContext(NavbarContext);
|
|
5273
|
-
var classes = getStyles(styles$
|
|
5313
|
+
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
|
|
5274
5314
|
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")]);
|
|
5275
|
-
var activeClasses = getStyles(styles$
|
|
5315
|
+
var activeClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active"), // Navbar styles
|
|
5276
5316
|
navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active")]);
|
|
5277
|
-
var textClasses = getStyles(styles$
|
|
5317
|
+
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
|
|
5278
5318
|
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")]);
|
|
5279
|
-
var activeTextClasses = getStyles(styles$
|
|
5319
|
+
var activeTextClasses = getStyles(styles$p, [variant && ".nav-".concat(variant, " .nav-link-active-text"), // Navbar styles
|
|
5280
5320
|
navbar && ".navbar-".concat(navbar.variant, " .navbar-nav .nav-link-active-text")]);
|
|
5281
5321
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
5282
5322
|
ref: modifierRef,
|
|
@@ -5289,27 +5329,27 @@ var NavLink = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5289
5329
|
}), children);
|
|
5290
5330
|
});
|
|
5291
5331
|
NavLink.displayName = 'NavLink';
|
|
5292
|
-
NavLink.propTypes = propTypes$
|
|
5332
|
+
NavLink.propTypes = propTypes$v;
|
|
5293
5333
|
|
|
5294
5334
|
var TabContext = /*#__PURE__*/createContext();
|
|
5295
5335
|
TabContext.displayName = 'TabContext';
|
|
5296
5336
|
|
|
5297
|
-
var _excluded$
|
|
5337
|
+
var _excluded$v = ["children", "variant", "style"];
|
|
5298
5338
|
|
|
5299
|
-
var _templateObject$
|
|
5300
|
-
var propTypes$
|
|
5339
|
+
var _templateObject$o, _templateObject2$i, _templateObject3$7, _templateObject4$5;
|
|
5340
|
+
var propTypes$u = {
|
|
5301
5341
|
children: PropTypes.node.isRequired,
|
|
5302
5342
|
variant: PropTypes.oneOf(['tabs', 'pills']),
|
|
5303
5343
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5304
5344
|
style: PropTypes.any
|
|
5305
5345
|
};
|
|
5306
|
-
var styles$
|
|
5307
|
-
'.nav': css(_templateObject$
|
|
5308
|
-
'.nav-tabs': css(_templateObject2$
|
|
5346
|
+
var styles$o = StyleSheet.create(_objectSpread2({
|
|
5347
|
+
'.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 "]))),
|
|
5348
|
+
'.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 "]))),
|
|
5309
5349
|
// Navbar styles
|
|
5310
|
-
'.navbar-nav': css(_templateObject3$
|
|
5350
|
+
'.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 "])))
|
|
5311
5351
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5312
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-nav"), css(_templateObject4$
|
|
5352
|
+
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)));
|
|
5313
5353
|
})));
|
|
5314
5354
|
|
|
5315
5355
|
var getRole = function getRole(tabbable, navbar) {
|
|
@@ -5328,11 +5368,11 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5328
5368
|
var children = props.children,
|
|
5329
5369
|
variant = props.variant,
|
|
5330
5370
|
style = props.style,
|
|
5331
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5371
|
+
elementProps = _objectWithoutProperties(props, _excluded$v);
|
|
5332
5372
|
|
|
5333
5373
|
var navbar = useContext(NavbarContext);
|
|
5334
5374
|
var tabbable = useContext(TabContext);
|
|
5335
|
-
var classes = getStyles(styles$
|
|
5375
|
+
var classes = getStyles(styles$o, [!navbar && '.nav', variant === 'tabs' && '.nav-tabs', // Navbar styles
|
|
5336
5376
|
navbar && '.navbar-nav', navbar && navbar.expand && ".navbar-expand".concat(navbar.expand === true ? '' : "-".concat(navbar.expand), " .navbar-nav")]);
|
|
5337
5377
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5338
5378
|
ref: ref,
|
|
@@ -5345,7 +5385,7 @@ var Nav = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5345
5385
|
}, children));
|
|
5346
5386
|
});
|
|
5347
5387
|
Nav.displayName = 'Nav';
|
|
5348
|
-
Nav.propTypes = propTypes$
|
|
5388
|
+
Nav.propTypes = propTypes$u;
|
|
5349
5389
|
Nav.Context = NavContext;
|
|
5350
5390
|
Nav.Link = NavLink;
|
|
5351
5391
|
|
|
@@ -5366,7 +5406,7 @@ function useTabbable(defaultActiveTarget, controlledActiveTarget, onChange) {
|
|
|
5366
5406
|
}, [activeTarget]);
|
|
5367
5407
|
}
|
|
5368
5408
|
|
|
5369
|
-
var propTypes$
|
|
5409
|
+
var propTypes$t = {
|
|
5370
5410
|
children: PropTypes.node.isRequired,
|
|
5371
5411
|
defaultActiveTarget: PropTypes.string.isRequired,
|
|
5372
5412
|
activeTarget: PropTypes.string,
|
|
@@ -5385,9 +5425,9 @@ var TabProvider = function TabProvider(props) {
|
|
|
5385
5425
|
};
|
|
5386
5426
|
|
|
5387
5427
|
TabProvider.displayName = 'TabProvider';
|
|
5388
|
-
TabProvider.propTypes = propTypes$
|
|
5428
|
+
TabProvider.propTypes = propTypes$t;
|
|
5389
5429
|
|
|
5390
|
-
var propTypes$
|
|
5430
|
+
var propTypes$s = {
|
|
5391
5431
|
children: PropTypes.node.isRequired
|
|
5392
5432
|
};
|
|
5393
5433
|
var TabContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
@@ -5398,28 +5438,28 @@ var TabContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5398
5438
|
}));
|
|
5399
5439
|
});
|
|
5400
5440
|
TabContent.displayName = 'TabContent';
|
|
5401
|
-
TabContent.propTypes = propTypes$
|
|
5441
|
+
TabContent.propTypes = propTypes$s;
|
|
5402
5442
|
|
|
5403
|
-
var _excluded$
|
|
5443
|
+
var _excluded$u = ["id", "style"];
|
|
5404
5444
|
|
|
5405
|
-
var _templateObject$
|
|
5406
|
-
var propTypes$
|
|
5445
|
+
var _templateObject$n, _templateObject2$h;
|
|
5446
|
+
var propTypes$r = {
|
|
5407
5447
|
children: PropTypes.node.isRequired,
|
|
5408
5448
|
id: PropTypes.string.isRequired,
|
|
5409
5449
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5410
5450
|
style: PropTypes.any
|
|
5411
5451
|
};
|
|
5412
|
-
var styles$
|
|
5413
|
-
'.tab-pane': css(_templateObject$
|
|
5414
|
-
'.active': css(_templateObject2$
|
|
5452
|
+
var styles$n = StyleSheet.create({
|
|
5453
|
+
'.tab-pane': css(_templateObject$n || (_templateObject$n = _taggedTemplateLiteral(["\n display: none;\n "]))),
|
|
5454
|
+
'.active': css(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteral(["\n display: flex;\n "])))
|
|
5415
5455
|
});
|
|
5416
5456
|
var TabPane = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5417
5457
|
var target = props.id,
|
|
5418
5458
|
style = props.style,
|
|
5419
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5459
|
+
elementProps = _objectWithoutProperties(props, _excluded$u);
|
|
5420
5460
|
|
|
5421
5461
|
var tabbable = useForcedContext(TabContext);
|
|
5422
|
-
var classes = getStyles(styles$
|
|
5462
|
+
var classes = getStyles(styles$n, ['.tab-pane', tabbable.activeTarget === target && '.active']);
|
|
5423
5463
|
var id = getElementId(tabbable.identifier, target); // Accessiblity role tabpanel is only supported on web.
|
|
5424
5464
|
|
|
5425
5465
|
var role = Platform.OS === 'web' ? 'tabpanel' : null;
|
|
@@ -5432,15 +5472,15 @@ var TabPane = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5432
5472
|
}));
|
|
5433
5473
|
});
|
|
5434
5474
|
TabPane.displayName = 'TabPane';
|
|
5435
|
-
TabPane.propTypes = propTypes$
|
|
5475
|
+
TabPane.propTypes = propTypes$r;
|
|
5436
5476
|
|
|
5437
|
-
var _excluded$
|
|
5477
|
+
var _excluded$t = ["target", "onPress"];
|
|
5438
5478
|
function useToggleTab(props) {
|
|
5439
5479
|
var context = useForcedContext(TabContext);
|
|
5440
5480
|
|
|
5441
5481
|
var target = props.target,
|
|
5442
5482
|
handlePress = props.onPress,
|
|
5443
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5483
|
+
restProps = _objectWithoutProperties(props, _excluded$t);
|
|
5444
5484
|
|
|
5445
5485
|
invariant(target, 'Prop "target" is required.');
|
|
5446
5486
|
var id = getElementId(context.identifier, target);
|
|
@@ -5466,63 +5506,63 @@ Tab.Content = TabContent;
|
|
|
5466
5506
|
Tab.Pane = TabPane;
|
|
5467
5507
|
Tab.useToggle = useToggleTab;
|
|
5468
5508
|
|
|
5469
|
-
var _excluded$
|
|
5509
|
+
var _excluded$s = ["children", "style"];
|
|
5470
5510
|
|
|
5471
|
-
var _templateObject$
|
|
5472
|
-
var propTypes$
|
|
5511
|
+
var _templateObject$m, _templateObject2$g, _templateObject3$6;
|
|
5512
|
+
var propTypes$q = {
|
|
5473
5513
|
children: PropTypes.node.isRequired,
|
|
5474
5514
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5475
5515
|
style: PropTypes.any
|
|
5476
5516
|
};
|
|
5477
|
-
var styles$
|
|
5478
|
-
'.navbar-text': css(_templateObject$
|
|
5479
|
-
'.navbar-light .navbar-text': css(_templateObject2$
|
|
5480
|
-
'.navbar-dark .navbar-text': css(_templateObject3$
|
|
5517
|
+
var styles$m = StyleSheet.create({
|
|
5518
|
+
'.navbar-text': css(_templateObject$m || (_templateObject$m = _taggedTemplateLiteral(["\n padding-top: $nav-link-padding-y;\n padding-bottom: $nav-link-padding-y;\n "]))),
|
|
5519
|
+
'.navbar-light .navbar-text': css(_templateObject2$g || (_templateObject2$g = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5520
|
+
'.navbar-dark .navbar-text': css(_templateObject3$6 || (_templateObject3$6 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5481
5521
|
});
|
|
5482
5522
|
var NavbarText = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5483
5523
|
var children = props.children,
|
|
5484
5524
|
style = props.style,
|
|
5485
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5525
|
+
elementProps = _objectWithoutProperties(props, _excluded$s);
|
|
5486
5526
|
|
|
5487
5527
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5488
5528
|
variant = _useForcedContext.variant;
|
|
5489
5529
|
|
|
5490
|
-
var classes = getStyles(styles$
|
|
5530
|
+
var classes = getStyles(styles$m, ['.navbar-text', ".navbar-".concat(variant, " .navbar-text")]);
|
|
5491
5531
|
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
5492
5532
|
ref: ref,
|
|
5493
5533
|
style: [classes, style]
|
|
5494
5534
|
}), children);
|
|
5495
5535
|
});
|
|
5496
5536
|
NavbarText.displayName = 'NavbarText';
|
|
5497
|
-
NavbarText.propTypes = propTypes$
|
|
5537
|
+
NavbarText.propTypes = propTypes$q;
|
|
5498
5538
|
|
|
5499
|
-
var _excluded$
|
|
5539
|
+
var _excluded$r = ["children", "style", "textStyle"];
|
|
5500
5540
|
|
|
5501
|
-
var _templateObject$
|
|
5502
|
-
var propTypes$
|
|
5541
|
+
var _templateObject$l, _templateObject2$f, _templateObject3$5, _templateObject4$4;
|
|
5542
|
+
var propTypes$p = {
|
|
5503
5543
|
children: PropTypes.node.isRequired,
|
|
5504
5544
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5505
5545
|
style: PropTypes.any,
|
|
5506
5546
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5507
5547
|
textStyle: PropTypes.any
|
|
5508
5548
|
};
|
|
5509
|
-
var styles$
|
|
5510
|
-
'.navbar-brand': css(_templateObject$
|
|
5511
|
-
'.navbar-brand-text': css(_templateObject2$
|
|
5512
|
-
'.navbar-light .navbar-brand-text': css(_templateObject3$
|
|
5513
|
-
'.navbar-dark .navbar-brand-text': css(_templateObject4$
|
|
5549
|
+
var styles$l = StyleSheet.create({
|
|
5550
|
+
'.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 "]))),
|
|
5551
|
+
'.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 "]))),
|
|
5552
|
+
'.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 "]))),
|
|
5553
|
+
'.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 "])))
|
|
5514
5554
|
});
|
|
5515
5555
|
var NavbarBrand = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5516
5556
|
var children = props.children,
|
|
5517
5557
|
style = props.style,
|
|
5518
5558
|
textStyle = props.textStyle,
|
|
5519
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5559
|
+
elementProps = _objectWithoutProperties(props, _excluded$r);
|
|
5520
5560
|
|
|
5521
5561
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5522
5562
|
variant = _useForcedContext.variant;
|
|
5523
5563
|
|
|
5524
|
-
var classes = getStyles(styles$
|
|
5525
|
-
var textClasses = getStyles(styles$
|
|
5564
|
+
var classes = getStyles(styles$l, ['.navbar-brand']);
|
|
5565
|
+
var textClasses = getStyles(styles$l, ['.navbar-brand-text', ".navbar-".concat(variant, " .navbar-brand-text")]);
|
|
5526
5566
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
5527
5567
|
ref: ref,
|
|
5528
5568
|
style: [classes, style],
|
|
@@ -5530,32 +5570,32 @@ var NavbarBrand = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5530
5570
|
}), children);
|
|
5531
5571
|
});
|
|
5532
5572
|
NavbarBrand.displayName = 'NavbarBrand';
|
|
5533
|
-
NavbarBrand.propTypes = propTypes$
|
|
5573
|
+
NavbarBrand.propTypes = propTypes$p;
|
|
5534
5574
|
|
|
5535
|
-
var _excluded$
|
|
5575
|
+
var _excluded$q = ["children", "style"];
|
|
5536
5576
|
|
|
5537
|
-
var _templateObject$
|
|
5538
|
-
var propTypes$
|
|
5577
|
+
var _templateObject$k, _templateObject2$e;
|
|
5578
|
+
var propTypes$o = {
|
|
5539
5579
|
children: PropTypes.node.isRequired,
|
|
5540
5580
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5541
5581
|
style: PropTypes.any
|
|
5542
5582
|
};
|
|
5543
|
-
var styles$
|
|
5544
|
-
'.navbar-collapse': css(_templateObject$
|
|
5583
|
+
var styles$k = StyleSheet.create(_objectSpread2({
|
|
5584
|
+
'.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 "])))
|
|
5545
5585
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5546
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint)), " .navbar-collapse"), css(_templateObject2$
|
|
5586
|
+
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)));
|
|
5547
5587
|
})));
|
|
5548
5588
|
var NavbarCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5549
5589
|
var children = props.children,
|
|
5550
5590
|
style = props.style,
|
|
5551
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5591
|
+
elementProps = _objectWithoutProperties(props, _excluded$q);
|
|
5552
5592
|
|
|
5553
5593
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5554
5594
|
expand = _useForcedContext.expand,
|
|
5555
5595
|
expanded = _useForcedContext.expanded;
|
|
5556
5596
|
|
|
5557
5597
|
var media = useMedia();
|
|
5558
|
-
var classes = getStyles(styles$
|
|
5598
|
+
var classes = getStyles(styles$k, ['.navbar-collapse', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-collapse")]);
|
|
5559
5599
|
var show = expanded || expand && (expand === true || media.up(expand));
|
|
5560
5600
|
|
|
5561
5601
|
if (!show) {
|
|
@@ -5568,14 +5608,14 @@ var NavbarCollapse = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5568
5608
|
}), children);
|
|
5569
5609
|
});
|
|
5570
5610
|
NavbarCollapse.displayName = 'NavbarCollapse';
|
|
5571
|
-
NavbarCollapse.propTypes = propTypes$
|
|
5611
|
+
NavbarCollapse.propTypes = propTypes$o;
|
|
5572
5612
|
|
|
5573
|
-
var _excluded$
|
|
5613
|
+
var _excluded$p = ["onPress"];
|
|
5574
5614
|
function useToggleNavbar(props) {
|
|
5575
5615
|
var context = useForcedContext(NavbarContext);
|
|
5576
5616
|
|
|
5577
5617
|
var handlePress = props.onPress,
|
|
5578
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5618
|
+
restProps = _objectWithoutProperties(props, _excluded$p);
|
|
5579
5619
|
|
|
5580
5620
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
5581
5621
|
nativeID: context.identifier,
|
|
@@ -5591,10 +5631,10 @@ function useToggleNavbar(props) {
|
|
|
5591
5631
|
});
|
|
5592
5632
|
}
|
|
5593
5633
|
|
|
5594
|
-
var _excluded$
|
|
5634
|
+
var _excluded$o = ["style", "textStyle", "iconStyle"];
|
|
5595
5635
|
|
|
5596
|
-
var _templateObject$
|
|
5597
|
-
var propTypes$
|
|
5636
|
+
var _templateObject$j, _templateObject2$d, _templateObject3$4, _templateObject4$3, _templateObject5$3, _templateObject6$3, _templateObject7$2, _templateObject8$2;
|
|
5637
|
+
var propTypes$n = {
|
|
5598
5638
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5599
5639
|
style: PropTypes.any,
|
|
5600
5640
|
// eslint-disable-next-line react/forbid-prop-types
|
|
@@ -5602,31 +5642,31 @@ var propTypes$k = {
|
|
|
5602
5642
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5603
5643
|
iconStyle: PropTypes.any
|
|
5604
5644
|
};
|
|
5605
|
-
var styles$
|
|
5606
|
-
'.navbar-toggler': css(_templateObject$
|
|
5607
|
-
'.navbar-toggler-text': css(_templateObject2$
|
|
5608
|
-
'.navbar-toggler-icon': css(_templateObject3$
|
|
5645
|
+
var styles$j = StyleSheet.create(_objectSpread2(_objectSpread2({
|
|
5646
|
+
'.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 "]))),
|
|
5647
|
+
'.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 "]))),
|
|
5648
|
+
'.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 "])))
|
|
5609
5649
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5610
|
-
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)));
|
|
5650
|
+
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)));
|
|
5611
5651
|
})), {}, {
|
|
5612
|
-
'.navbar-light .navbar-toggler': css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-color: $navbar-light-toggler-border-color;\n "]))),
|
|
5613
|
-
'.navbar-light .navbar-toggler-text': css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5614
|
-
'.navbar-dark .navbar-toggler': css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n border-color: $navbar-dark-toggler-border-color;\n "]))),
|
|
5615
|
-
'.navbar-dark .navbar-toggler-text': css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5652
|
+
'.navbar-light .navbar-toggler': css(_templateObject5$3 || (_templateObject5$3 = _taggedTemplateLiteral(["\n border-color: $navbar-light-toggler-border-color;\n "]))),
|
|
5653
|
+
'.navbar-light .navbar-toggler-text': css(_templateObject6$3 || (_templateObject6$3 = _taggedTemplateLiteral(["\n color: $navbar-light-color;\n "]))),
|
|
5654
|
+
'.navbar-dark .navbar-toggler': css(_templateObject7$2 || (_templateObject7$2 = _taggedTemplateLiteral(["\n border-color: $navbar-dark-toggler-border-color;\n "]))),
|
|
5655
|
+
'.navbar-dark .navbar-toggler-text': css(_templateObject8$2 || (_templateObject8$2 = _taggedTemplateLiteral(["\n color: $navbar-dark-color;\n "])))
|
|
5616
5656
|
}));
|
|
5617
5657
|
var NavbarToggler = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5618
5658
|
var style = props.style,
|
|
5619
5659
|
textStyle = props.textStyle,
|
|
5620
5660
|
iconStyle = props.iconStyle,
|
|
5621
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5661
|
+
elementProps = _objectWithoutProperties(props, _excluded$o);
|
|
5622
5662
|
|
|
5623
5663
|
var _useForcedContext = useForcedContext(NavbarContext),
|
|
5624
5664
|
variant = _useForcedContext.variant,
|
|
5625
5665
|
expand = _useForcedContext.expand;
|
|
5626
5666
|
|
|
5627
|
-
var classes = getStyles(styles$
|
|
5628
|
-
var textClasses = getStyles(styles$
|
|
5629
|
-
var iconClasses = getStyles(styles$
|
|
5667
|
+
var classes = getStyles(styles$j, ['.navbar-toggler', ".navbar-".concat(variant, " .navbar-toggler"), expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand), " .navbar-toggler")]);
|
|
5668
|
+
var textClasses = getStyles(styles$j, ['.navbar-toggler-text', ".navbar-".concat(variant, " .navbar-toggler-text")]);
|
|
5669
|
+
var iconClasses = getStyles(styles$j, ['.navbar-toggler-icon']);
|
|
5630
5670
|
return /*#__PURE__*/React.createElement(Pressable, _extends({}, elementProps, {
|
|
5631
5671
|
ref: ref,
|
|
5632
5672
|
toggle: useToggleNavbar,
|
|
@@ -5637,7 +5677,7 @@ var NavbarToggler = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5637
5677
|
}, StyleSheet.value("navbar-".concat(variant, "-toggler-icon-bg"))));
|
|
5638
5678
|
});
|
|
5639
5679
|
NavbarToggler.displayName = 'NavbarToggler';
|
|
5640
|
-
NavbarToggler.propTypes = propTypes$
|
|
5680
|
+
NavbarToggler.propTypes = propTypes$n;
|
|
5641
5681
|
|
|
5642
5682
|
function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expand) {
|
|
5643
5683
|
var identifier = useIdentifier('navbar');
|
|
@@ -5658,12 +5698,12 @@ function useNavbar(variant, defaultExpanded, controlledExpanded, onToggle, expan
|
|
|
5658
5698
|
}, [variant, expanded]);
|
|
5659
5699
|
}
|
|
5660
5700
|
|
|
5661
|
-
var _excluded$
|
|
5701
|
+
var _excluded$n = ["onPress"];
|
|
5662
5702
|
function useDismissNavbar(props) {
|
|
5663
5703
|
var context = useForcedContext(NavbarContext);
|
|
5664
5704
|
|
|
5665
5705
|
var handlePress = props.onPress,
|
|
5666
|
-
restProps = _objectWithoutProperties(props, _excluded$
|
|
5706
|
+
restProps = _objectWithoutProperties(props, _excluded$n);
|
|
5667
5707
|
|
|
5668
5708
|
return _objectSpread2(_objectSpread2({}, restProps), {}, {
|
|
5669
5709
|
onPress: function onPress(event) {
|
|
@@ -5674,10 +5714,10 @@ function useDismissNavbar(props) {
|
|
|
5674
5714
|
});
|
|
5675
5715
|
}
|
|
5676
5716
|
|
|
5677
|
-
var _excluded$
|
|
5717
|
+
var _excluded$m = ["children", "variant", "defaultExpanded", "expanded", "onToggle", "expand", "style"];
|
|
5678
5718
|
|
|
5679
|
-
var _templateObject$
|
|
5680
|
-
var propTypes$
|
|
5719
|
+
var _templateObject$i, _templateObject2$c;
|
|
5720
|
+
var propTypes$m = {
|
|
5681
5721
|
children: PropTypes.node.isRequired,
|
|
5682
5722
|
variant: PropTypes.oneOf(['light', 'dark']),
|
|
5683
5723
|
defaultExpanded: PropTypes.bool,
|
|
@@ -5687,10 +5727,10 @@ var propTypes$j = {
|
|
|
5687
5727
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5688
5728
|
style: PropTypes.any
|
|
5689
5729
|
};
|
|
5690
|
-
var styles$
|
|
5691
|
-
'.navbar': css(_templateObject$
|
|
5730
|
+
var styles$i = StyleSheet.create(_objectSpread2({
|
|
5731
|
+
'.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 "])))
|
|
5692
5732
|
}, each(GRID_BREAKPOINTS, function (breakpoint) {
|
|
5693
|
-
return _defineProperty({}, ".navbar-expand".concat(infix(next(breakpoint))), css(_templateObject2$
|
|
5733
|
+
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)));
|
|
5694
5734
|
})));
|
|
5695
5735
|
var Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5696
5736
|
var children = props.children,
|
|
@@ -5702,10 +5742,10 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5702
5742
|
onToggle = props.onToggle,
|
|
5703
5743
|
expand = props.expand,
|
|
5704
5744
|
style = props.style,
|
|
5705
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5745
|
+
elementProps = _objectWithoutProperties(props, _excluded$m);
|
|
5706
5746
|
|
|
5707
5747
|
var navbar = useNavbar(variant, defaultExpanded, expanded, onToggle, expand);
|
|
5708
|
-
var classes = getStyles(styles$
|
|
5748
|
+
var classes = getStyles(styles$i, ['.navbar', expand && ".navbar-expand".concat(expand === true ? '' : "-".concat(expand))]);
|
|
5709
5749
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5710
5750
|
ref: ref,
|
|
5711
5751
|
style: [classes, style]
|
|
@@ -5714,7 +5754,7 @@ var Navbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5714
5754
|
}, children));
|
|
5715
5755
|
});
|
|
5716
5756
|
Navbar.displayName = 'Navbar';
|
|
5717
|
-
Navbar.propTypes = propTypes$
|
|
5757
|
+
Navbar.propTypes = propTypes$m;
|
|
5718
5758
|
Navbar.Brand = NavbarBrand;
|
|
5719
5759
|
Navbar.Text = NavbarText;
|
|
5720
5760
|
Navbar.Collapse = NavbarCollapse;
|
|
@@ -5722,23 +5762,202 @@ Navbar.Toggler = NavbarToggler;
|
|
|
5722
5762
|
Navbar.useDismiss = useDismissNavbar;
|
|
5723
5763
|
Navbar.useToggle = useToggleNavbar;
|
|
5724
5764
|
|
|
5725
|
-
var
|
|
5765
|
+
var PLACEMENTS = ['top', 'bottom', 'left', 'right'];
|
|
5766
|
+
var TRIGGERS = ['click', 'hover', 'focus', 'manual', 'click hover', 'hover click', 'hover focus', 'focus hover', 'click focus', 'focus click'];
|
|
5767
|
+
var TriggerPropTypes = {
|
|
5768
|
+
trigger: PropTypes.oneOf(TRIGGERS),
|
|
5769
|
+
placement: PropTypes.oneOf(PLACEMENTS),
|
|
5770
|
+
offset: PropTypes.number,
|
|
5771
|
+
defaultVisible: PropTypes.bool,
|
|
5772
|
+
visible: PropTypes.bool,
|
|
5773
|
+
onToggle: PropTypes.func
|
|
5774
|
+
};
|
|
5775
|
+
function useTrigger(rawTrigger, props, elementProps, ref) {
|
|
5776
|
+
var _props$defaultVisible = props.defaultVisible,
|
|
5777
|
+
defaultVisible = _props$defaultVisible === void 0 ? false : _props$defaultVisible,
|
|
5778
|
+
controlledVisible = props.visible,
|
|
5779
|
+
onToggle = props.onToggle;
|
|
5780
|
+
var _onPress = elementProps.onPress,
|
|
5781
|
+
_onFocus = elementProps.onFocus,
|
|
5782
|
+
_onBlur = elementProps.onBlur,
|
|
5783
|
+
_onMouseOver = elementProps.onMouseOver,
|
|
5784
|
+
_onMouseLeave = elementProps.onMouseLeave;
|
|
5785
|
+
var trigger = rawTrigger.split(' ');
|
|
5786
|
+
var identifier = useIdentifier('overlay');
|
|
5726
5787
|
|
|
5727
|
-
var
|
|
5728
|
-
|
|
5788
|
+
var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
|
|
5789
|
+
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
5790
|
+
visible = _useControlledState2[0],
|
|
5791
|
+
setVisible = _useControlledState2[1];
|
|
5792
|
+
|
|
5793
|
+
var _useState = useState(false),
|
|
5794
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
5795
|
+
focused = _useState2[0],
|
|
5796
|
+
setFocused = _useState2[1];
|
|
5797
|
+
|
|
5798
|
+
var _useState3 = useState(false),
|
|
5799
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
5800
|
+
hovered = _useState4[0],
|
|
5801
|
+
setHovered = _useState4[1];
|
|
5802
|
+
|
|
5803
|
+
var targetRef = useRef();
|
|
5804
|
+
return {
|
|
5805
|
+
visible: visible,
|
|
5806
|
+
setVisible: setVisible,
|
|
5807
|
+
targetProps: _objectSpread2(_objectSpread2({
|
|
5808
|
+
ref: concatRefs(targetRef, ref)
|
|
5809
|
+
}, optional(visible, {
|
|
5810
|
+
accessibilityDescribedBy: identifier
|
|
5811
|
+
})), {}, {
|
|
5812
|
+
onPress: function onPress(event) {
|
|
5813
|
+
if (trigger.includes('click')) {
|
|
5814
|
+
setVisible(function (value) {
|
|
5815
|
+
return !value;
|
|
5816
|
+
});
|
|
5817
|
+
}
|
|
5818
|
+
|
|
5819
|
+
if (_onPress) {
|
|
5820
|
+
_onPress(event);
|
|
5821
|
+
}
|
|
5822
|
+
},
|
|
5823
|
+
onFocus: function onFocus(event) {
|
|
5824
|
+
if (trigger.includes('focus')) {
|
|
5825
|
+
setFocused(true);
|
|
5826
|
+
|
|
5827
|
+
if (!visible) {
|
|
5828
|
+
setVisible(true);
|
|
5829
|
+
}
|
|
5830
|
+
}
|
|
5831
|
+
|
|
5832
|
+
if (_onFocus) {
|
|
5833
|
+
_onFocus(event);
|
|
5834
|
+
}
|
|
5835
|
+
},
|
|
5836
|
+
onBlur: function onBlur(event) {
|
|
5837
|
+
if (trigger.includes('focus')) {
|
|
5838
|
+
setFocused(false);
|
|
5839
|
+
var activeHoverTrigger = trigger.includes('hover') && hovered;
|
|
5840
|
+
|
|
5841
|
+
if (visible && !activeHoverTrigger) {
|
|
5842
|
+
setVisible(false);
|
|
5843
|
+
}
|
|
5844
|
+
}
|
|
5845
|
+
|
|
5846
|
+
if (_onBlur) {
|
|
5847
|
+
_onBlur(event);
|
|
5848
|
+
}
|
|
5849
|
+
},
|
|
5850
|
+
onMouseOver: function onMouseOver(event) {
|
|
5851
|
+
if (trigger.includes('hover')) {
|
|
5852
|
+
setHovered(true);
|
|
5853
|
+
|
|
5854
|
+
if (!visible && !focused) {
|
|
5855
|
+
setVisible(true);
|
|
5856
|
+
}
|
|
5857
|
+
}
|
|
5858
|
+
|
|
5859
|
+
if (_onMouseOver) {
|
|
5860
|
+
_onMouseOver(event);
|
|
5861
|
+
}
|
|
5862
|
+
},
|
|
5863
|
+
onMouseLeave: function onMouseLeave(event) {
|
|
5864
|
+
if (trigger.includes('hover')) {
|
|
5865
|
+
setHovered(false);
|
|
5866
|
+
var activeFocusTrigger = trigger.includes('focus') && focused;
|
|
5867
|
+
|
|
5868
|
+
if (visible && !activeFocusTrigger) {
|
|
5869
|
+
setVisible(false);
|
|
5870
|
+
}
|
|
5871
|
+
}
|
|
5872
|
+
|
|
5873
|
+
if (_onMouseLeave) {
|
|
5874
|
+
_onMouseLeave(event);
|
|
5875
|
+
}
|
|
5876
|
+
}
|
|
5877
|
+
}),
|
|
5878
|
+
targetRef: targetRef,
|
|
5879
|
+
templateProps: {
|
|
5880
|
+
nativeID: identifier
|
|
5881
|
+
}
|
|
5882
|
+
};
|
|
5883
|
+
}
|
|
5884
|
+
|
|
5885
|
+
var PopoverContext = /*#__PURE__*/React.createContext();
|
|
5886
|
+
PopoverContext.displayName = 'PopoverContext';
|
|
5887
|
+
|
|
5888
|
+
var _excluded$l = ["style"];
|
|
5889
|
+
|
|
5890
|
+
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;
|
|
5891
|
+
var propTypes$l = {
|
|
5892
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
5893
|
+
style: PropTypes.any
|
|
5894
|
+
};
|
|
5895
|
+
var styles$h = StyleSheet.create({
|
|
5896
|
+
'.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 "]))),
|
|
5897
|
+
'.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 "]))),
|
|
5898
|
+
'.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 "]))),
|
|
5899
|
+
'.bs-popover-top .popover-arrow': css(_templateObject4$2 || (_templateObject4$2 = _taggedTemplateLiteral(["\n bottom: ", ";\n "])), function (t) {
|
|
5900
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5901
|
+
}),
|
|
5902
|
+
'.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 "]))),
|
|
5903
|
+
'.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 "]))),
|
|
5904
|
+
'.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) {
|
|
5905
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5906
|
+
}),
|
|
5907
|
+
'.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 "]))),
|
|
5908
|
+
'.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 "]))),
|
|
5909
|
+
'.bs-popover-bottom .popover-arrow': css(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteral(["\n top: ", ";\n "])), function (t) {
|
|
5910
|
+
return subtract("-".concat(t['popover-arrow-height']), t['popover-border-width']);
|
|
5911
|
+
}),
|
|
5912
|
+
'.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 "]))),
|
|
5913
|
+
'.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 "]))),
|
|
5914
|
+
'.bs-popover-start .popover-arrow': css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n right: ", ";\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-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 "]))),
|
|
5918
|
+
'.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 "])))
|
|
5919
|
+
});
|
|
5920
|
+
var PopoverArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5921
|
+
var style = props.style,
|
|
5922
|
+
elementProps = _objectWithoutProperties(props, _excluded$l);
|
|
5923
|
+
|
|
5924
|
+
var _useForcedContext = useForcedContext(PopoverContext),
|
|
5925
|
+
placement = _useForcedContext.placement,
|
|
5926
|
+
arrowStyle = _useForcedContext.arrowStyle,
|
|
5927
|
+
popper = _useForcedContext.popper;
|
|
5928
|
+
|
|
5929
|
+
var classes = getStyles(styles$h, ['.popover-arrow', popper && ".popover-arrow-".concat(placement)]);
|
|
5930
|
+
var beforeClasses = getStyles(styles$h, ['.popover-arrow::before', popper && ".bs-popover-".concat(placement, " .popover-arrow::before")]);
|
|
5931
|
+
var afterClasses = getStyles(styles$h, ['.popover-arrow::after', popper && ".bs-popover-".concat(placement, " .popover-arrow::after")]);
|
|
5932
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5933
|
+
ref: ref,
|
|
5934
|
+
style: [classes, arrowStyle, style]
|
|
5935
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
5936
|
+
style: beforeClasses
|
|
5937
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
5938
|
+
style: afterClasses
|
|
5939
|
+
}));
|
|
5940
|
+
});
|
|
5941
|
+
PopoverArrow.displayName = 'PopoverArrow';
|
|
5942
|
+
PopoverArrow.propTypes = propTypes$l;
|
|
5943
|
+
|
|
5944
|
+
var _excluded$k = ["children", "style"];
|
|
5945
|
+
|
|
5946
|
+
var _templateObject$g;
|
|
5947
|
+
var propTypes$k = {
|
|
5729
5948
|
children: PropTypes.node.isRequired,
|
|
5730
5949
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5731
5950
|
style: PropTypes.any
|
|
5732
5951
|
};
|
|
5733
|
-
var styles$
|
|
5734
|
-
'.popover-header': css(_templateObject$
|
|
5952
|
+
var styles$g = StyleSheet.create({
|
|
5953
|
+
'.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 "])))
|
|
5735
5954
|
});
|
|
5736
5955
|
var PopoverHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5737
5956
|
var children = props.children,
|
|
5738
5957
|
style = props.style,
|
|
5739
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
5958
|
+
elementProps = _objectWithoutProperties(props, _excluded$k);
|
|
5740
5959
|
|
|
5741
|
-
var classes = getStyles(styles$
|
|
5960
|
+
var classes = getStyles(styles$g, ['.popover-header']);
|
|
5742
5961
|
return /*#__PURE__*/React.createElement(Heading$1, _extends({}, elementProps, {
|
|
5743
5962
|
ref: ref,
|
|
5744
5963
|
size: 3,
|
|
@@ -5746,206 +5965,96 @@ var PopoverHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
5746
5965
|
}), children);
|
|
5747
5966
|
});
|
|
5748
5967
|
PopoverHeader.displayName = 'PopoverHeader';
|
|
5749
|
-
PopoverHeader.propTypes = propTypes$
|
|
5968
|
+
PopoverHeader.propTypes = propTypes$k;
|
|
5750
5969
|
|
|
5751
|
-
var _excluded$
|
|
5970
|
+
var _excluded$j = ["children", "style"];
|
|
5752
5971
|
|
|
5753
|
-
var _templateObject$
|
|
5754
|
-
var propTypes$
|
|
5972
|
+
var _templateObject$f, _templateObject2$a;
|
|
5973
|
+
var propTypes$j = {
|
|
5755
5974
|
children: PropTypes.node.isRequired,
|
|
5756
5975
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5757
5976
|
style: PropTypes.any
|
|
5758
5977
|
};
|
|
5759
|
-
var styles$
|
|
5760
|
-
'.popover-body': css(_templateObject$
|
|
5761
|
-
'.popover-body-text': css(_templateObject2$
|
|
5978
|
+
var styles$f = StyleSheet.create({
|
|
5979
|
+
'.popover-body': css(_templateObject$f || (_templateObject$f = _taggedTemplateLiteral(["\n padding: $popover-body-padding-y $popover-body-padding-x;\n "]))),
|
|
5980
|
+
'.popover-body-text': css(_templateObject2$a || (_templateObject2$a = _taggedTemplateLiteral(["\n color: $popover-body-color;\n "])))
|
|
5762
5981
|
});
|
|
5763
5982
|
var PopoverBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5764
|
-
var children = props.children
|
|
5765
|
-
props.style
|
|
5766
|
-
|
|
5983
|
+
var children = props.children,
|
|
5984
|
+
style = props.style,
|
|
5985
|
+
elementProps = _objectWithoutProperties(props, _excluded$j);
|
|
5767
5986
|
|
|
5768
|
-
var classes = getStyles(styles$
|
|
5769
|
-
var textClasses = getStyles(styles$
|
|
5987
|
+
var classes = getStyles(styles$f, ['.popover-body']);
|
|
5988
|
+
var textClasses = getStyles(styles$f, ['.popover-body-text']);
|
|
5770
5989
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5771
5990
|
ref: ref,
|
|
5772
|
-
style: [classes]
|
|
5991
|
+
style: [classes, style]
|
|
5773
5992
|
}), /*#__PURE__*/React.createElement(TextStyleProvider, {
|
|
5774
5993
|
style: textClasses
|
|
5775
5994
|
}, children));
|
|
5776
5995
|
});
|
|
5777
5996
|
PopoverBody.displayName = 'PopoverBody';
|
|
5778
|
-
PopoverBody.propTypes = propTypes$
|
|
5997
|
+
PopoverBody.propTypes = propTypes$j;
|
|
5779
5998
|
|
|
5780
|
-
var _excluded$
|
|
5999
|
+
var _excluded$i = ["children", "placement", "popper", "style", "arrowStyle"];
|
|
5781
6000
|
|
|
5782
|
-
var _templateObject$
|
|
5783
|
-
var propTypes$
|
|
6001
|
+
var _templateObject$e, _templateObject2$9;
|
|
6002
|
+
var propTypes$i = {
|
|
5784
6003
|
children: PropTypes.node.isRequired,
|
|
6004
|
+
placement: PropTypes.string,
|
|
6005
|
+
popper: PropTypes.bool,
|
|
5785
6006
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5786
|
-
style: PropTypes.any
|
|
6007
|
+
style: PropTypes.any,
|
|
6008
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6009
|
+
arrowStyle: PropTypes.any
|
|
5787
6010
|
};
|
|
5788
|
-
var styles$
|
|
5789
|
-
'.popover': css(_templateObject$
|
|
5790
|
-
'.popover-text': css(_templateObject2$
|
|
6011
|
+
var styles$e = StyleSheet.create({
|
|
6012
|
+
'.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 "]))),
|
|
6013
|
+
'.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 "])))
|
|
5791
6014
|
});
|
|
5792
6015
|
var Popover = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5793
6016
|
var children = props.children,
|
|
6017
|
+
_props$placement = props.placement,
|
|
6018
|
+
placement = _props$placement === void 0 ? 'right' : _props$placement,
|
|
6019
|
+
popper = props.popper,
|
|
5794
6020
|
style = props.style,
|
|
5795
|
-
|
|
6021
|
+
arrowStyle = props.arrowStyle,
|
|
6022
|
+
elementProps = _objectWithoutProperties(props, _excluded$i);
|
|
5796
6023
|
|
|
5797
|
-
var
|
|
5798
|
-
|
|
6024
|
+
var popover = {
|
|
6025
|
+
placement: transformPlacement$1(placement),
|
|
6026
|
+
arrowStyle: arrowStyle,
|
|
6027
|
+
popper: popper
|
|
6028
|
+
};
|
|
6029
|
+
var classes = getStyles(styles$e, ['.popover']);
|
|
6030
|
+
var textClasses = getStyles(styles$e, ['.popover-text']); // Accessiblity role tooltip is only supported on web.
|
|
5799
6031
|
|
|
5800
6032
|
var role = Platform.OS === 'web' ? 'tooltip' : null;
|
|
5801
6033
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
5802
6034
|
ref: ref,
|
|
5803
6035
|
accessibilityRole: role,
|
|
5804
6036
|
style: [classes, style]
|
|
5805
|
-
}), /*#__PURE__*/React.createElement(
|
|
6037
|
+
}), /*#__PURE__*/React.createElement(PopoverContext.Provider, {
|
|
6038
|
+
value: popover
|
|
6039
|
+
}, /*#__PURE__*/React.createElement(TextStyleProvider, {
|
|
5806
6040
|
style: textClasses
|
|
5807
|
-
}, children));
|
|
6041
|
+
}, children)));
|
|
5808
6042
|
});
|
|
5809
6043
|
Popover.displayName = 'Popover';
|
|
5810
|
-
Popover.propTypes = propTypes$
|
|
6044
|
+
Popover.propTypes = propTypes$i;
|
|
6045
|
+
Popover.Arrow = PopoverArrow;
|
|
5811
6046
|
Popover.Header = PopoverHeader;
|
|
5812
6047
|
Popover.Body = PopoverBody;
|
|
5813
6048
|
|
|
5814
|
-
var
|
|
5815
|
-
|
|
5816
|
-
var
|
|
5817
|
-
trigger: PropTypes.oneOf(TRIGGERS),
|
|
5818
|
-
placement: PropTypes.oneOf(PLACEMENTS),
|
|
5819
|
-
defaultVisible: PropTypes.bool,
|
|
5820
|
-
visible: PropTypes.bool,
|
|
5821
|
-
onToggle: PropTypes.func,
|
|
5822
|
-
arrowStyle: PropTypes.any
|
|
5823
|
-
};
|
|
5824
|
-
function useOverlay(target, template, config) {
|
|
5825
|
-
var rawTrigger = config.trigger,
|
|
5826
|
-
placement = config.placement,
|
|
5827
|
-
_config$defaultVisibl = config.defaultVisible,
|
|
5828
|
-
defaultVisible = _config$defaultVisibl === void 0 ? false : _config$defaultVisibl,
|
|
5829
|
-
controlledVisible = config.visible,
|
|
5830
|
-
onToggle = config.onToggle,
|
|
5831
|
-
arrowStyle = config.arrowStyle;
|
|
5832
|
-
var trigger = rawTrigger.split(' ');
|
|
5833
|
-
var identifier = useIdentifier('overlay');
|
|
5834
|
-
|
|
5835
|
-
var _useControlledState = useControlledState(defaultVisible, controlledVisible, onToggle),
|
|
5836
|
-
_useControlledState2 = _slicedToArray(_useControlledState, 2),
|
|
5837
|
-
visible = _useControlledState2[0],
|
|
5838
|
-
setVisible = _useControlledState2[1];
|
|
5839
|
-
|
|
5840
|
-
var _useState = useState(false),
|
|
5841
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
5842
|
-
focused = _useState2[0],
|
|
5843
|
-
setFocused = _useState2[1];
|
|
5844
|
-
|
|
5845
|
-
var _useState3 = useState(false),
|
|
5846
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
5847
|
-
hovered = _useState4[0],
|
|
5848
|
-
setHovered = _useState4[1];
|
|
5849
|
-
|
|
5850
|
-
var targetElement = /*#__PURE__*/React.cloneElement(target, _objectSpread2(_objectSpread2({
|
|
5851
|
-
key: 'target'
|
|
5852
|
-
}, optional(visible, {
|
|
5853
|
-
accessibilityDescribedBy: identifier
|
|
5854
|
-
})), {}, {
|
|
5855
|
-
onPress: function onPress(event) {
|
|
5856
|
-
if (trigger.includes('click')) {
|
|
5857
|
-
setVisible(function (value) {
|
|
5858
|
-
return !value;
|
|
5859
|
-
});
|
|
5860
|
-
}
|
|
5861
|
-
|
|
5862
|
-
if (target.props.onPress) {
|
|
5863
|
-
target.props.onPress(event);
|
|
5864
|
-
}
|
|
5865
|
-
},
|
|
5866
|
-
onFocus: function onFocus(event) {
|
|
5867
|
-
if (trigger.includes('focus')) {
|
|
5868
|
-
setFocused(true);
|
|
5869
|
-
|
|
5870
|
-
if (!visible) {
|
|
5871
|
-
setVisible(true);
|
|
5872
|
-
}
|
|
5873
|
-
}
|
|
5874
|
-
|
|
5875
|
-
if (target.props.onFocus) {
|
|
5876
|
-
target.props.onFocus(event);
|
|
5877
|
-
}
|
|
5878
|
-
},
|
|
5879
|
-
onBlur: function onBlur(event) {
|
|
5880
|
-
if (trigger.includes('focus')) {
|
|
5881
|
-
setFocused(false);
|
|
5882
|
-
var activeHoverTrigger = trigger.includes('hover') && hovered;
|
|
5883
|
-
|
|
5884
|
-
if (visible && !activeHoverTrigger) {
|
|
5885
|
-
setVisible(false);
|
|
5886
|
-
}
|
|
5887
|
-
}
|
|
5888
|
-
|
|
5889
|
-
if (target.props.onBlur) {
|
|
5890
|
-
target.props.onBlur(event);
|
|
5891
|
-
}
|
|
5892
|
-
},
|
|
5893
|
-
onMouseOver: function onMouseOver(event) {
|
|
5894
|
-
if (trigger.includes('hover')) {
|
|
5895
|
-
setHovered(true);
|
|
5896
|
-
|
|
5897
|
-
if (!visible && !focused) {
|
|
5898
|
-
setVisible(true);
|
|
5899
|
-
}
|
|
5900
|
-
}
|
|
5901
|
-
|
|
5902
|
-
if (target.props.onMouseOver) {
|
|
5903
|
-
target.props.onMouseOver(event);
|
|
5904
|
-
}
|
|
5905
|
-
},
|
|
5906
|
-
onMouseLeave: function onMouseLeave(event) {
|
|
5907
|
-
if (trigger.includes('hover')) {
|
|
5908
|
-
setHovered(false);
|
|
5909
|
-
var activeFocusTrigger = trigger.includes('focus') && focused;
|
|
5910
|
-
|
|
5911
|
-
if (visible && !activeFocusTrigger) {
|
|
5912
|
-
setVisible(false);
|
|
5913
|
-
}
|
|
5914
|
-
}
|
|
5915
|
-
|
|
5916
|
-
if (target.props.onMouveLeave) {
|
|
5917
|
-
target.props.onMouseLeave(event);
|
|
5918
|
-
}
|
|
5919
|
-
}
|
|
5920
|
-
}));
|
|
5921
|
-
var templateElement = /*#__PURE__*/React.cloneElement(template, {
|
|
5922
|
-
nativeID: identifier
|
|
5923
|
-
});
|
|
5924
|
-
return /*#__PURE__*/React.createElement(Overlay$1, {
|
|
5925
|
-
from: targetElement,
|
|
5926
|
-
isVisible: visible,
|
|
5927
|
-
placement: placement,
|
|
5928
|
-
popoverStyle: {
|
|
5929
|
-
backgroundColor: 'transparent'
|
|
5930
|
-
},
|
|
5931
|
-
backgroundStyle: {
|
|
5932
|
-
backgroundColor: 'transparent'
|
|
5933
|
-
},
|
|
5934
|
-
arrowStyle: arrowStyle,
|
|
5935
|
-
onRequestClose: function onRequestClose() {
|
|
5936
|
-
setVisible(false);
|
|
5937
|
-
}
|
|
5938
|
-
}, templateElement);
|
|
5939
|
-
}
|
|
5940
|
-
|
|
5941
|
-
var _excluded$f = ["popover"];
|
|
5942
|
-
var propTypes$f = {
|
|
6049
|
+
var _excluded$h = ["title", "content", "trigger", "placement"],
|
|
6050
|
+
_excluded2$1 = ["popover"];
|
|
6051
|
+
var propTypes$h = {
|
|
5943
6052
|
popover: PropTypes.shape(_objectSpread2({
|
|
5944
6053
|
title: PropTypes.node,
|
|
5945
6054
|
content: PropTypes.node.isRequired
|
|
5946
|
-
},
|
|
6055
|
+
}, TriggerPropTypes))
|
|
5947
6056
|
};
|
|
5948
|
-
function injectPopover(
|
|
6057
|
+
function injectPopover(Target) {
|
|
5949
6058
|
var OverlayPopover = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
5950
6059
|
/* eslint-disable react/prop-types */
|
|
5951
6060
|
var _props$popover = props.popover,
|
|
@@ -5955,48 +6064,56 @@ function injectPopover(Component) {
|
|
|
5955
6064
|
trigger = _props$popover$trigge === void 0 ? 'click' : _props$popover$trigge,
|
|
5956
6065
|
_props$popover$placem = _props$popover.placement,
|
|
5957
6066
|
placement = _props$popover$placem === void 0 ? 'right' : _props$popover$placem,
|
|
5958
|
-
|
|
5959
|
-
|
|
5960
|
-
onToggle = _props$popover.onToggle,
|
|
5961
|
-
elementProps = _objectWithoutProperties(props, _excluded$f);
|
|
6067
|
+
tooltipProps = _objectWithoutProperties(_props$popover, _excluded$h),
|
|
6068
|
+
elementProps = _objectWithoutProperties(props, _excluded2$1);
|
|
5962
6069
|
/* eslint-enable */
|
|
5963
6070
|
|
|
5964
6071
|
|
|
5965
|
-
var
|
|
5966
|
-
|
|
5967
|
-
|
|
5968
|
-
|
|
5969
|
-
|
|
5970
|
-
|
|
6072
|
+
var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
|
|
6073
|
+
visible = _useTrigger.visible,
|
|
6074
|
+
targetProps = _useTrigger.targetProps,
|
|
6075
|
+
targetRef = _useTrigger.targetRef,
|
|
6076
|
+
templateProps = _useTrigger.templateProps;
|
|
6077
|
+
|
|
6078
|
+
var offset = convertToNumber(StyleSheet.value('popover-arrow-height'));
|
|
6079
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.createElement(Overlay, {
|
|
5971
6080
|
placement: placement,
|
|
5972
|
-
|
|
5973
|
-
|
|
5974
|
-
|
|
5975
|
-
|
|
5976
|
-
|
|
5977
|
-
}
|
|
5978
|
-
|
|
6081
|
+
offset: offset,
|
|
6082
|
+
arrowOffset: offset,
|
|
6083
|
+
targetRef: targetRef,
|
|
6084
|
+
visible: visible
|
|
6085
|
+
}, function (overlay, overlayRef) {
|
|
6086
|
+
return /*#__PURE__*/React.createElement(Popover, _extends({}, templateProps, {
|
|
6087
|
+
ref: overlayRef,
|
|
6088
|
+
placement: overlay.placement,
|
|
6089
|
+
popper: overlay.rendered,
|
|
6090
|
+
style: [{
|
|
6091
|
+
opacity: overlay.rendered ? 1 : 0
|
|
6092
|
+
}, overlay.overlayProps.style],
|
|
6093
|
+
arrowStyle: overlay.arrowProps.style
|
|
6094
|
+
}), /*#__PURE__*/React.createElement(Popover.Arrow, null), title && /*#__PURE__*/React.createElement(Popover.Header, null, title), /*#__PURE__*/React.createElement(Popover.Body, null, content));
|
|
6095
|
+
})));
|
|
5979
6096
|
});
|
|
5980
6097
|
OverlayPopover.displayName = 'Overlay(Popover)';
|
|
5981
|
-
OverlayPopover.propTypes = propTypes$
|
|
6098
|
+
OverlayPopover.propTypes = propTypes$h;
|
|
5982
6099
|
return OverlayPopover;
|
|
5983
6100
|
}
|
|
5984
6101
|
|
|
5985
6102
|
var ProgressContext = /*#__PURE__*/React.createContext();
|
|
5986
6103
|
ProgressContext.displayName = 'ProgressContext';
|
|
5987
6104
|
|
|
5988
|
-
var _excluded$
|
|
6105
|
+
var _excluded$g = ["children", "value", "style"];
|
|
5989
6106
|
|
|
5990
|
-
var _templateObject$
|
|
5991
|
-
var propTypes$
|
|
6107
|
+
var _templateObject$d, _templateObject2$8;
|
|
6108
|
+
var propTypes$g = {
|
|
5992
6109
|
children: PropTypes.node,
|
|
5993
6110
|
value: PropTypes.number.isRequired,
|
|
5994
6111
|
// eslint-disable-next-line react/forbid-prop-types
|
|
5995
6112
|
style: PropTypes.any
|
|
5996
6113
|
};
|
|
5997
|
-
var styles$
|
|
5998
|
-
'.progress-bar': css(_templateObject$
|
|
5999
|
-
'.progress-bar-text': css(_templateObject2$
|
|
6114
|
+
var styles$d = StyleSheet.create({
|
|
6115
|
+
'.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 "]))),
|
|
6116
|
+
'.progress-bar-text': css(_templateObject2$8 || (_templateObject2$8 = _taggedTemplateLiteral(["\n color: $progress-bar-color;\n text-align: center;\n // white-space: nowrap;\n "])))
|
|
6000
6117
|
});
|
|
6001
6118
|
var ROUND_PRECISION = 1000;
|
|
6002
6119
|
|
|
@@ -6009,14 +6126,14 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6009
6126
|
var children = props.children,
|
|
6010
6127
|
value = props.value,
|
|
6011
6128
|
style = props.style,
|
|
6012
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6129
|
+
elementProps = _objectWithoutProperties(props, _excluded$g);
|
|
6013
6130
|
|
|
6014
6131
|
var _useForcedContext = useForcedContext(ProgressContext),
|
|
6015
6132
|
min = _useForcedContext.min,
|
|
6016
6133
|
max = _useForcedContext.max;
|
|
6017
6134
|
|
|
6018
|
-
var classes = getStyles(styles$
|
|
6019
|
-
var textClasses = getStyles(styles$
|
|
6135
|
+
var classes = getStyles(styles$d, ['.progress-bar']);
|
|
6136
|
+
var textClasses = getStyles(styles$d, ['.progress-bar-text']);
|
|
6020
6137
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6021
6138
|
ref: ref,
|
|
6022
6139
|
style: [classes, style, {
|
|
@@ -6031,7 +6148,7 @@ var ProgressBar = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6031
6148
|
}, /*#__PURE__*/React.createElement(Text, null, children || ' ')));
|
|
6032
6149
|
});
|
|
6033
6150
|
ProgressBar.displayName = 'ProgressBar';
|
|
6034
|
-
ProgressBar.propTypes = propTypes$
|
|
6151
|
+
ProgressBar.propTypes = propTypes$g;
|
|
6035
6152
|
|
|
6036
6153
|
function useProgress(min, max) {
|
|
6037
6154
|
return useMemo(function () {
|
|
@@ -6042,19 +6159,19 @@ function useProgress(min, max) {
|
|
|
6042
6159
|
}, [min, max]);
|
|
6043
6160
|
}
|
|
6044
6161
|
|
|
6045
|
-
var _excluded$
|
|
6162
|
+
var _excluded$f = ["children", "min", "max", "style"];
|
|
6046
6163
|
|
|
6047
|
-
var _templateObject$
|
|
6048
|
-
var propTypes$
|
|
6164
|
+
var _templateObject$c, _templateObject2$7;
|
|
6165
|
+
var propTypes$f = {
|
|
6049
6166
|
children: PropTypes.node.isRequired,
|
|
6050
6167
|
min: PropTypes.number,
|
|
6051
6168
|
max: PropTypes.number,
|
|
6052
6169
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6053
6170
|
style: PropTypes.any
|
|
6054
6171
|
};
|
|
6055
|
-
var styles$
|
|
6056
|
-
'.progress': css(_templateObject$
|
|
6057
|
-
'.progress-text': css(_templateObject2$
|
|
6172
|
+
var styles$c = StyleSheet.create({
|
|
6173
|
+
'.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 "]))),
|
|
6174
|
+
'.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 "])))
|
|
6058
6175
|
});
|
|
6059
6176
|
var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6060
6177
|
var children = props.children,
|
|
@@ -6063,11 +6180,11 @@ var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6063
6180
|
_props$max = props.max,
|
|
6064
6181
|
max = _props$max === void 0 ? 100 : _props$max,
|
|
6065
6182
|
style = props.style,
|
|
6066
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6183
|
+
elementProps = _objectWithoutProperties(props, _excluded$f);
|
|
6067
6184
|
|
|
6068
6185
|
var progress = useProgress(min, max);
|
|
6069
|
-
var classes = getStyles(styles$
|
|
6070
|
-
var textClasses = getStyles(styles$
|
|
6186
|
+
var classes = getStyles(styles$c, ['.progress']);
|
|
6187
|
+
var textClasses = getStyles(styles$c, ['.progress-text']);
|
|
6071
6188
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6072
6189
|
ref: ref,
|
|
6073
6190
|
style: [classes, style]
|
|
@@ -6078,32 +6195,32 @@ var Progress = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6078
6195
|
}, children)));
|
|
6079
6196
|
});
|
|
6080
6197
|
Progress.displayName = 'Progress';
|
|
6081
|
-
Progress.propTypes = propTypes$
|
|
6198
|
+
Progress.propTypes = propTypes$f;
|
|
6082
6199
|
Progress.Bar = ProgressBar;
|
|
6083
6200
|
|
|
6084
|
-
var _excluded$
|
|
6201
|
+
var _excluded$e = ["children", "style"];
|
|
6085
6202
|
|
|
6086
|
-
var _templateObject$
|
|
6087
|
-
var propTypes$
|
|
6203
|
+
var _templateObject$b, _templateObject2$6;
|
|
6204
|
+
var propTypes$e = {
|
|
6088
6205
|
children: PropTypes.node.isRequired,
|
|
6089
6206
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6090
6207
|
style: PropTypes.any
|
|
6091
6208
|
};
|
|
6092
|
-
var styles$
|
|
6093
|
-
'.toast-header': css(_templateObject$
|
|
6209
|
+
var styles$b = StyleSheet.create({
|
|
6210
|
+
'.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) {
|
|
6094
6211
|
return subtract(t['toast-border-radius'], t['toast-border-width']);
|
|
6095
6212
|
}, function (t) {
|
|
6096
6213
|
return subtract(t['toast-border-radius'], t['toast-border-width']);
|
|
6097
6214
|
}),
|
|
6098
|
-
'.toast-header-text': css(_templateObject2$
|
|
6215
|
+
'.toast-header-text': css(_templateObject2$6 || (_templateObject2$6 = _taggedTemplateLiteral(["\n color: $toast-header-color;\n "])))
|
|
6099
6216
|
});
|
|
6100
6217
|
var ToastHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6101
6218
|
var children = props.children,
|
|
6102
6219
|
style = props.style,
|
|
6103
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6220
|
+
elementProps = _objectWithoutProperties(props, _excluded$e);
|
|
6104
6221
|
|
|
6105
|
-
var classes = getStyles(styles$
|
|
6106
|
-
var textClasses = getStyles(styles$
|
|
6222
|
+
var classes = getStyles(styles$b, ['.toast-header']);
|
|
6223
|
+
var textClasses = getStyles(styles$b, ['.toast-header-text']);
|
|
6107
6224
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6108
6225
|
ref: ref,
|
|
6109
6226
|
style: [classes, style]
|
|
@@ -6112,27 +6229,27 @@ var ToastHeader = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6112
6229
|
}, children));
|
|
6113
6230
|
});
|
|
6114
6231
|
ToastHeader.displayName = 'ToastHeader';
|
|
6115
|
-
ToastHeader.propTypes = propTypes$
|
|
6232
|
+
ToastHeader.propTypes = propTypes$e;
|
|
6116
6233
|
|
|
6117
|
-
var _excluded$
|
|
6234
|
+
var _excluded$d = ["children", "style"];
|
|
6118
6235
|
|
|
6119
|
-
var _templateObject$
|
|
6120
|
-
var propTypes$
|
|
6236
|
+
var _templateObject$a, _templateObject2$5;
|
|
6237
|
+
var propTypes$d = {
|
|
6121
6238
|
children: PropTypes.node.isRequired,
|
|
6122
6239
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6123
6240
|
style: PropTypes.any
|
|
6124
6241
|
};
|
|
6125
|
-
var styles$
|
|
6126
|
-
'.toast-body': css(_templateObject$
|
|
6127
|
-
'.toast-body-text': css(_templateObject2$
|
|
6242
|
+
var styles$a = StyleSheet.create({
|
|
6243
|
+
'.toast-body': css(_templateObject$a || (_templateObject$a = _taggedTemplateLiteral(["\n padding: $toast-padding-x; // apply to both vertical and horizontal\n "]))),
|
|
6244
|
+
'.toast-body-text': css(_templateObject2$5 || (_templateObject2$5 = _taggedTemplateLiteral(["\n @include platform(web) {\n word-wrap: break-word;\n }\n "])))
|
|
6128
6245
|
});
|
|
6129
6246
|
var ToastBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6130
6247
|
var children = props.children,
|
|
6131
6248
|
style = props.style,
|
|
6132
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6249
|
+
elementProps = _objectWithoutProperties(props, _excluded$d);
|
|
6133
6250
|
|
|
6134
|
-
var classes = getStyles(styles$
|
|
6135
|
-
var textClasses = getStyles(styles$
|
|
6251
|
+
var classes = getStyles(styles$a, ['.toast-body']);
|
|
6252
|
+
var textClasses = getStyles(styles$a, [".toast-body-text"]);
|
|
6136
6253
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6137
6254
|
ref: ref,
|
|
6138
6255
|
style: [classes, style]
|
|
@@ -6141,35 +6258,35 @@ var ToastBody = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6141
6258
|
}, children));
|
|
6142
6259
|
});
|
|
6143
6260
|
ToastBody.displayName = 'ToastBody';
|
|
6144
|
-
ToastBody.propTypes = propTypes$
|
|
6261
|
+
ToastBody.propTypes = propTypes$d;
|
|
6145
6262
|
|
|
6146
6263
|
var ToastContainerContext = /*#__PURE__*/React.createContext();
|
|
6147
6264
|
ToastContainerContext.displayName = 'ToastContainerContext';
|
|
6148
6265
|
|
|
6149
|
-
var _excluded$
|
|
6266
|
+
var _excluded$c = ["children", "last", "style"];
|
|
6150
6267
|
|
|
6151
|
-
var _templateObject$
|
|
6152
|
-
var propTypes$
|
|
6268
|
+
var _templateObject$9, _templateObject2$4, _templateObject3$2;
|
|
6269
|
+
var propTypes$c = {
|
|
6153
6270
|
children: PropTypes.node.isRequired,
|
|
6154
6271
|
last: PropTypes.bool,
|
|
6155
6272
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6156
6273
|
style: PropTypes.any
|
|
6157
6274
|
};
|
|
6158
|
-
var styles$
|
|
6159
|
-
'.toast': css(_templateObject$
|
|
6160
|
-
'.toast-text': css(_templateObject2$
|
|
6161
|
-
'.toast-container .toast': css(_templateObject3$
|
|
6275
|
+
var styles$9 = StyleSheet.create({
|
|
6276
|
+
'.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 "]))),
|
|
6277
|
+
'.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 "]))),
|
|
6278
|
+
'.toast-container .toast': css(_templateObject3$2 || (_templateObject3$2 = _taggedTemplateLiteral(["\n margin-bottom: $toast-spacing;\n "])))
|
|
6162
6279
|
});
|
|
6163
6280
|
var Toast = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6164
6281
|
var children = props.children,
|
|
6165
6282
|
_props$last = props.last,
|
|
6166
6283
|
last = _props$last === void 0 ? false : _props$last,
|
|
6167
6284
|
style = props.style,
|
|
6168
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6285
|
+
elementProps = _objectWithoutProperties(props, _excluded$c);
|
|
6169
6286
|
|
|
6170
6287
|
var container = useContext(ToastContainerContext);
|
|
6171
|
-
var classes = getStyles(styles$
|
|
6172
|
-
var textClasses = getStyles(styles$
|
|
6288
|
+
var classes = getStyles(styles$9, ['.toast', container && !last && '.toast-container .toast']);
|
|
6289
|
+
var textClasses = getStyles(styles$9, [".toast-text"]);
|
|
6173
6290
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6174
6291
|
ref: ref,
|
|
6175
6292
|
accessibilityRole: "alert",
|
|
@@ -6181,27 +6298,27 @@ var Toast = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6181
6298
|
}, children));
|
|
6182
6299
|
});
|
|
6183
6300
|
Toast.displayName = 'Toast';
|
|
6184
|
-
Toast.propTypes = propTypes$
|
|
6301
|
+
Toast.propTypes = propTypes$c;
|
|
6185
6302
|
Toast.Header = ToastHeader;
|
|
6186
6303
|
Toast.Body = ToastBody;
|
|
6187
6304
|
|
|
6188
|
-
var _excluded$
|
|
6305
|
+
var _excluded$b = ["children", "style"];
|
|
6189
6306
|
|
|
6190
|
-
var _templateObject$
|
|
6191
|
-
var propTypes$
|
|
6307
|
+
var _templateObject$8;
|
|
6308
|
+
var propTypes$b = {
|
|
6192
6309
|
children: PropTypes.node.isRequired,
|
|
6193
6310
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6194
6311
|
style: PropTypes.any
|
|
6195
6312
|
};
|
|
6196
|
-
var styles$
|
|
6197
|
-
'.toast-container': css(_templateObject$
|
|
6313
|
+
var styles$8 = StyleSheet.create({
|
|
6314
|
+
'.toast-container': css(_templateObject$8 || (_templateObject$8 = _taggedTemplateLiteral(["\n width: 100%; // max-content;\n max-width: 100%;\n // pointer-events: none;\n "])))
|
|
6198
6315
|
});
|
|
6199
6316
|
var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6200
6317
|
var children = props.children,
|
|
6201
6318
|
style = props.style,
|
|
6202
|
-
elementProps = _objectWithoutProperties(props, _excluded$
|
|
6319
|
+
elementProps = _objectWithoutProperties(props, _excluded$b);
|
|
6203
6320
|
|
|
6204
|
-
var classes = getStyles(styles$
|
|
6321
|
+
var classes = getStyles(styles$8, ['.toast-container']);
|
|
6205
6322
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6206
6323
|
ref: ref,
|
|
6207
6324
|
style: [classes, style]
|
|
@@ -6210,77 +6327,175 @@ var ToastContainer = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
6210
6327
|
}, makeListChildren(children)));
|
|
6211
6328
|
});
|
|
6212
6329
|
ToastContainer.displayName = 'ToastContainer';
|
|
6213
|
-
ToastContainer.propTypes = propTypes$
|
|
6330
|
+
ToastContainer.propTypes = propTypes$b;
|
|
6214
6331
|
|
|
6215
|
-
var
|
|
6332
|
+
var TooltipContext = /*#__PURE__*/React.createContext();
|
|
6333
|
+
TooltipContext.displayName = 'TooltipContext';
|
|
6216
6334
|
|
|
6217
|
-
var
|
|
6218
|
-
|
|
6335
|
+
var _excluded$a = ["style"];
|
|
6336
|
+
|
|
6337
|
+
var _templateObject$7, _templateObject2$3, _templateObject3$1, _templateObject4$1, _templateObject5$1, _templateObject6$1, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
6338
|
+
var propTypes$a = {
|
|
6339
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6340
|
+
style: PropTypes.any
|
|
6341
|
+
};
|
|
6342
|
+
var styles$7 = StyleSheet.create({
|
|
6343
|
+
'.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 "]))),
|
|
6344
|
+
'.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 "]))),
|
|
6345
|
+
'.bs-tooltip-top .tooltip-arrow': css(_templateObject3$1 || (_templateObject3$1 = _taggedTemplateLiteral(["\n bottom: 0;\n "]))),
|
|
6346
|
+
'.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 "]))),
|
|
6347
|
+
'.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 "]))),
|
|
6348
|
+
'.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 "]))),
|
|
6349
|
+
'.bs-tooltip-bottom .tooltip-arrow': css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n top: 0;\n "]))),
|
|
6350
|
+
'.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 "]))),
|
|
6351
|
+
'.bs-tooltip-start .tooltip-arrow': css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n right: 0;\n width: $tooltip-arrow-height;\n height: $tooltip-arrow-width;\n "]))),
|
|
6352
|
+
'.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 "])))
|
|
6353
|
+
});
|
|
6354
|
+
var TooltipArrow = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6355
|
+
var style = props.style,
|
|
6356
|
+
elementProps = _objectWithoutProperties(props, _excluded$a);
|
|
6357
|
+
|
|
6358
|
+
var _useForcedContext = useForcedContext(TooltipContext),
|
|
6359
|
+
placement = _useForcedContext.placement,
|
|
6360
|
+
arrowStyle = _useForcedContext.arrowStyle,
|
|
6361
|
+
popper = _useForcedContext.popper;
|
|
6362
|
+
|
|
6363
|
+
var classes = getStyles(styles$7, ['.tooltip-arrow', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow")]);
|
|
6364
|
+
var beforeClasses = getStyles(styles$7, ['.tooltip-arrow::before', popper && ".bs-tooltip-".concat(placement, " .tooltip-arrow::before")]);
|
|
6365
|
+
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6366
|
+
ref: ref,
|
|
6367
|
+
style: [classes, arrowStyle, style]
|
|
6368
|
+
}), /*#__PURE__*/React.createElement(View, {
|
|
6369
|
+
style: beforeClasses
|
|
6370
|
+
}));
|
|
6371
|
+
});
|
|
6372
|
+
TooltipArrow.displayName = 'TooltipArrow';
|
|
6373
|
+
TooltipArrow.propTypes = propTypes$a;
|
|
6374
|
+
|
|
6375
|
+
var _excluded$9 = ["children", "style"];
|
|
6376
|
+
|
|
6377
|
+
var _templateObject$6;
|
|
6378
|
+
var propTypes$9 = {
|
|
6219
6379
|
children: PropTypes.node.isRequired,
|
|
6220
6380
|
// eslint-disable-next-line react/forbid-prop-types
|
|
6221
6381
|
style: PropTypes.any
|
|
6222
6382
|
};
|
|
6383
|
+
var styles$6 = StyleSheet.create({
|
|
6384
|
+
'.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 "])))
|
|
6385
|
+
});
|
|
6386
|
+
var TooltipInner = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6387
|
+
var children = props.children,
|
|
6388
|
+
style = props.style,
|
|
6389
|
+
elementProps = _objectWithoutProperties(props, _excluded$9);
|
|
6390
|
+
|
|
6391
|
+
var classes = getStyles(styles$6, ['.tooltip-inner']);
|
|
6392
|
+
return /*#__PURE__*/React.createElement(Text, _extends({}, elementProps, {
|
|
6393
|
+
ref: ref,
|
|
6394
|
+
style: [classes, style]
|
|
6395
|
+
}), children);
|
|
6396
|
+
});
|
|
6397
|
+
TooltipInner.displayName = 'TooltipInner';
|
|
6398
|
+
TooltipInner.propTypes = propTypes$9;
|
|
6399
|
+
|
|
6400
|
+
var _excluded$8 = ["children", "placement", "popper", "style", "arrowStyle"];
|
|
6401
|
+
|
|
6402
|
+
var _templateObject$5, _templateObject2$2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
6403
|
+
var propTypes$8 = {
|
|
6404
|
+
children: PropTypes.node.isRequired,
|
|
6405
|
+
placement: PropTypes.string,
|
|
6406
|
+
popper: PropTypes.bool,
|
|
6407
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6408
|
+
style: PropTypes.any,
|
|
6409
|
+
// eslint-disable-next-line react/forbid-prop-types
|
|
6410
|
+
arrowStyle: PropTypes.any
|
|
6411
|
+
};
|
|
6223
6412
|
var styles$5 = StyleSheet.create({
|
|
6224
|
-
'.tooltip': css(_templateObject$5 || (_templateObject$5 = _taggedTemplateLiteral(["\n
|
|
6413
|
+
'.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 "]))),
|
|
6225
6414
|
'.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 "]))),
|
|
6226
|
-
'.tooltip-
|
|
6415
|
+
'.bs-tooltip-top': css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
|
|
6416
|
+
'.bs-tooltip-end': css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 0 $tooltip-arrow-height;\n "]))),
|
|
6417
|
+
'.bs-tooltip-bottom': css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: $tooltip-arrow-height 0;\n "]))),
|
|
6418
|
+
'.bs-tooltip-start': css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 0 $tooltip-arrow-height;\n "])))
|
|
6227
6419
|
});
|
|
6228
6420
|
var Tooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6229
6421
|
var children = props.children,
|
|
6422
|
+
_props$placement = props.placement,
|
|
6423
|
+
placement = _props$placement === void 0 ? 'top' : _props$placement,
|
|
6424
|
+
popper = props.popper,
|
|
6230
6425
|
style = props.style,
|
|
6426
|
+
arrowStyle = props.arrowStyle,
|
|
6231
6427
|
elementProps = _objectWithoutProperties(props, _excluded$8);
|
|
6232
6428
|
|
|
6233
|
-
var
|
|
6234
|
-
|
|
6429
|
+
var tooltip = {
|
|
6430
|
+
placement: transformPlacement$1(placement),
|
|
6431
|
+
arrowStyle: arrowStyle,
|
|
6432
|
+
popper: popper
|
|
6433
|
+
};
|
|
6434
|
+
var classes = getStyles(styles$5, ['.tooltip', // Wait for rendering (of Overlay) before setting the offset.
|
|
6435
|
+
popper && ".bs-tooltip-".concat(tooltip.placement)]);
|
|
6436
|
+
var textClasses = getStyles(styles$5, ['.tooltip-text']); // Accessiblity role tooltip is only supported on web.
|
|
6235
6437
|
|
|
6236
6438
|
var role = Platform.OS === 'web' ? 'tooltip' : null;
|
|
6237
6439
|
return /*#__PURE__*/React.createElement(View, _extends({}, elementProps, {
|
|
6238
6440
|
ref: ref,
|
|
6239
6441
|
accessibilityRole: role,
|
|
6240
|
-
style: classes
|
|
6241
|
-
}), /*#__PURE__*/React.createElement(
|
|
6242
|
-
|
|
6243
|
-
},
|
|
6442
|
+
style: [classes, style]
|
|
6443
|
+
}), /*#__PURE__*/React.createElement(TooltipContext.Provider, {
|
|
6444
|
+
value: tooltip
|
|
6445
|
+
}, /*#__PURE__*/React.createElement(TextStyleProvider, {
|
|
6446
|
+
style: textClasses
|
|
6447
|
+
}, children)));
|
|
6244
6448
|
});
|
|
6245
6449
|
Tooltip.displayName = 'Tooltip';
|
|
6246
6450
|
Tooltip.propTypes = propTypes$8;
|
|
6451
|
+
Tooltip.Arrow = TooltipArrow;
|
|
6452
|
+
Tooltip.Inner = TooltipInner;
|
|
6247
6453
|
|
|
6248
|
-
var _excluded$7 = ["
|
|
6454
|
+
var _excluded$7 = ["title", "trigger", "placement"],
|
|
6455
|
+
_excluded2 = ["tooltip"];
|
|
6249
6456
|
var propTypes$7 = {
|
|
6250
6457
|
tooltip: PropTypes.shape(_objectSpread2({
|
|
6251
6458
|
title: PropTypes.node.isRequired
|
|
6252
|
-
},
|
|
6459
|
+
}, TriggerPropTypes))
|
|
6253
6460
|
};
|
|
6254
|
-
|
|
6461
|
+
var defaultTrigger = Platform.OS === 'web' ? 'hover' : 'click';
|
|
6462
|
+
function injectTooltip(Target) {
|
|
6255
6463
|
var OverlayTooltip = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
6256
6464
|
/* eslint-disable react/prop-types */
|
|
6257
6465
|
var _props$tooltip = props.tooltip,
|
|
6258
6466
|
title = _props$tooltip.title,
|
|
6259
6467
|
_props$tooltip$trigge = _props$tooltip.trigger,
|
|
6260
|
-
trigger = _props$tooltip$trigge === void 0 ?
|
|
6468
|
+
trigger = _props$tooltip$trigge === void 0 ? defaultTrigger : _props$tooltip$trigge,
|
|
6261
6469
|
_props$tooltip$placem = _props$tooltip.placement,
|
|
6262
6470
|
placement = _props$tooltip$placem === void 0 ? 'top' : _props$tooltip$placem,
|
|
6263
|
-
|
|
6264
|
-
|
|
6265
|
-
onToggle = _props$tooltip.onToggle,
|
|
6266
|
-
elementProps = _objectWithoutProperties(props, _excluded$7);
|
|
6471
|
+
tooltipProps = _objectWithoutProperties(_props$tooltip, _excluded$7),
|
|
6472
|
+
elementProps = _objectWithoutProperties(props, _excluded2);
|
|
6267
6473
|
/* eslint-enable */
|
|
6268
6474
|
|
|
6269
6475
|
|
|
6270
|
-
var
|
|
6271
|
-
|
|
6272
|
-
|
|
6273
|
-
|
|
6274
|
-
|
|
6275
|
-
|
|
6476
|
+
var _useTrigger = useTrigger(trigger, tooltipProps, elementProps, ref),
|
|
6477
|
+
visible = _useTrigger.visible,
|
|
6478
|
+
targetProps = _useTrigger.targetProps,
|
|
6479
|
+
targetRef = _useTrigger.targetRef,
|
|
6480
|
+
templateProps = _useTrigger.templateProps;
|
|
6481
|
+
|
|
6482
|
+
var offset = convertToNumber(StyleSheet.value('tooltip-arrow-height'));
|
|
6483
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Target, _extends({}, elementProps, targetProps)), visible && /*#__PURE__*/React.createElement(OverlayContainer, null, /*#__PURE__*/React.createElement(Overlay, {
|
|
6276
6484
|
placement: placement,
|
|
6277
|
-
|
|
6278
|
-
|
|
6279
|
-
|
|
6280
|
-
|
|
6281
|
-
|
|
6282
|
-
|
|
6283
|
-
|
|
6485
|
+
targetRef: targetRef,
|
|
6486
|
+
arrowOffset: offset,
|
|
6487
|
+
visible: visible
|
|
6488
|
+
}, function (overlay, overlayRef) {
|
|
6489
|
+
return /*#__PURE__*/React.createElement(Tooltip, _extends({}, templateProps, {
|
|
6490
|
+
ref: overlayRef,
|
|
6491
|
+
placement: overlay.placement,
|
|
6492
|
+
popper: overlay.rendered,
|
|
6493
|
+
style: [{
|
|
6494
|
+
opacity: overlay.rendered ? 1 : 0
|
|
6495
|
+
}, overlay.overlayProps.style],
|
|
6496
|
+
arrowStyle: overlay.arrowProps.style
|
|
6497
|
+
}), /*#__PURE__*/React.createElement(Tooltip.Arrow, null), /*#__PURE__*/React.createElement(Tooltip.Inner, null, title));
|
|
6498
|
+
})));
|
|
6284
6499
|
});
|
|
6285
6500
|
OverlayTooltip.displayName = 'Overlay(Tooltip)';
|
|
6286
6501
|
OverlayTooltip.propTypes = propTypes$7;
|