@razorpay/blade
Version:
The Design System that powers Razorpay
56 lines (53 loc) • 1.7 kB
JavaScript
import 'react';
import { classes } from './tokens.js';
import '../Box/BaseBox/index.js';
import '../Drawer/index.js';
import getIn from '../../utils/lodashButBetter/get.js';
import '../../utils/index.js';
import { jsx } from 'react/jsx-runtime';
import { drawerPadding } from '../Drawer/DrawerSubcomponents.web.js';
import { makeSpace } from '../../utils/makeSpace/makeSpace.js';
import useTheme from '../BladeProvider/useTheme.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
var getDrawerPadding = function getDrawerPadding(theme) {
var negativePaddingValue = getIn(theme, drawerPadding);
return makeSpace(negativePaddingValue);
};
var SideNavFooter = function SideNavFooter(_ref) {
var children = _ref.children;
var _useTheme = useTheme(),
theme = _useTheme.theme;
return /*#__PURE__*/jsx(BaseBox, {
className: classes.L1_ITEM_WRAPPER,
width: {
base: "calc(100% + ".concat(getDrawerPadding(theme), " + ").concat(getDrawerPadding(theme), ")"),
m: '100%'
},
borderTopWidth: "thin",
borderTopColor: "surface.border.gray.muted",
backgroundColor: "surface.background.gray.moderate",
position: "relative",
elevation: "lowRaised",
bottom: {
base: "-".concat(getDrawerPadding(theme)),
m: 'spacing.0'
},
left: {
base: "-".concat(getDrawerPadding(theme)),
m: 'spacing.0'
},
right: {
base: "-".concat(getDrawerPadding(theme)),
m: 'spacing.0'
}
// in Desktop, padding is set on SideNav component
,
padding: {
base: 'spacing.4',
m: undefined
},
children: children
});
};
export { SideNavFooter };
//# sourceMappingURL=SideNavFooter.web.js.map