@oatfi/ui 0.2.0 → 0.4.0

package/dist/index.cjs.js

@@ -2,7 +2,7 @@
 
 var styles = require('@mui/material/styles');
 var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
+var React = require('react');
 var styled = require('styled-components');
 var material = require('@mui/material');
 var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
@@ -219,8 +219,8 @@ const GlobalStyle = styled.createGlobalStyle`
   }
 `;
 function ThemeProvider({ branding, children }) {
-  const theme = react.useMemo(() => mergeBranding(branding), [branding]);
-  const muiTheme = react.useMemo(() => buildMuiTheme(theme), [theme]);
+  const theme = React.useMemo(() => mergeBranding(branding), [branding]);
+  const muiTheme = React.useMemo(() => buildMuiTheme(theme), [theme]);
   return /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
     /* @__PURE__ */ jsxRuntime.jsx(styles.ThemeProvider, { theme: muiTheme, children })
@@ -477,6 +477,17 @@ const Button = styled.button`
     }
   }
 
+  &.dashed {
+    background-color: transparent;
+    color: ${({ theme }) => theme.colors.secondary};
+    border: 1px dashed ${({ theme }) => theme.colors.border};
+    &:hover {
+      background-color: ${({ theme }) => theme.colors.surface};
+      border-color: ${({ theme }) => theme.colors.secondary};
+      color: ${({ theme }) => theme.colors.primary};
+    }
+  }
+
   &.link {
     background-color: transparent;
     color: ${({ theme }) => theme.colors.accent};
@@ -803,7 +814,7 @@ function CurrencyInput({
   name,
   testId
 }) {
-  const reactId = react.useId();
+  const reactId = React.useId();
   const inputId = `${reactId}-input`;
   const errorId = `${reactId}-error`;
   const handleChange = (e) => {
@@ -848,7 +859,7 @@ function DateInput({
   min,
   max
 }) {
-  const inputRef = react.useRef(null);
+  const inputRef = React.useRef(null);
   const handleIconClick = () => {
     const input = inputRef.current;
     if (!input) return;
@@ -908,7 +919,7 @@ function DropDown({
   name,
   testId
 }) {
-  const reactId = react.useId();
+  const reactId = React.useId();
   const labelId = `${reactId}-label`;
   const selectId = `${reactId}-select`;
   const selectDisplayProps = {
@@ -1119,9 +1130,9 @@ function FileInput({
   name,
   testId
 }) {
-  const fileInputRef = react.useRef(null);
-  const [dragOver, setDragOver] = react.useState(false);
-  const reactId = react.useId();
+  const fileInputRef = React.useRef(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const reactId = React.useId();
   const inputId = `${reactId}-input`;
   const errorId = `${reactId}-error`;
   const requirementsId = `${reactId}-requirements`;
@@ -1426,8 +1437,8 @@ function Tabs({
   onTabChange,
   testId
 }) {
-  const [activeTab, setActiveTab] = react.useState(defaultActiveTab);
-  const baseId = react.useId();
+  const [activeTab, setActiveTab] = React.useState(defaultActiveTab);
+  const baseId = React.useId();
   const handleTabClick = (index) => {
     setActiveTab(index);
     onTabChange?.(index);
@@ -1472,15 +1483,55 @@ function Loader({ className, size, label = "Loading", testId }) {
   );
 }
 
+const Root = styled.footer`
+  margin-top: 2rem;
+  padding-top: 0.75rem;
+  border-top: ${({ theme }) => `${theme.border.width} solid ${theme.colors.border}`};
+  text-align: center;
+  font-family: ${({ theme }) => theme.typography.fontFamily};
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: ${({ theme }) => theme.colors.secondary};
+`;
+const Title = styled.p`
+  margin: 0 0 0.25rem;
+  font-weight: 600;
+  color: ${({ theme }) => theme.colors.primary};
+`;
+const Anchor = styled.a`
+  color: ${({ theme }) => theme.colors.accent};
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    text-decoration: underline;
+  }
+`;
+function Footnote({ title, text, links = [], className, testId }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root, { className, "data-testid": testId, children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx(Title, { children: title }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { margin: 0 }, children: [
+      text && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        text,
+        " "
+      ] }),
+      links.map((link, index) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " \xB7 " }),
+        /* @__PURE__ */ jsxRuntime.jsx(Anchor, { href: link.href, target: "_blank", rel: "noopener noreferrer", children: link.label })
+      ] }, link.href))
+    ] })
+  ] });
+}
+
 function DotsMenu({
   options,
   iconSize = "medium",
   ariaLabel = "more",
   testId
 }) {
-  const [anchorEl, setAnchorEl] = react.useState(null);
+  const [anchorEl, setAnchorEl] = React.useState(null);
   const open = Boolean(anchorEl);
-  const baseId = react.useId();
+  const baseId = React.useId();
   const buttonId = `${baseId}-button`;
   const menuId = `${baseId}-menu`;
   const handleClick = (event) => {
@@ -1551,9 +1602,9 @@ const SideColumn = styled.div`
   min-width: 0;
 `;
 function PreviewContent() {
-  const [name, setName] = react.useState("Acme Corporation");
-  const [plan, setPlan] = react.useState("growth");
-  const [autopay, setAutopay] = react.useState(true);
+  const [name, setName] = React.useState("Acme Corporation");
+  const [plan, setPlan] = React.useState("growth");
+  const [autopay, setAutopay] = React.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsxs(PreviewCard, { "data-testid": "oatfi-ui-preview", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(MainColumn, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(HeaderRow, { children: [
@@ -1620,6 +1671,7 @@ exports.EmailInput = EmailInput;
 exports.FileInput = FileInput;
 exports.FlexColumnWrapper = FlexColumnWrapper;
 exports.FlexRowWrapper = FlexRowWrapper;
+exports.Footnote = Footnote;
 exports.Form = Form;
 exports.FormActions = FormActions;
 exports.FormCheckboxLabel = FormCheckboxLabel;