@carbonplan/components 13.4.0-develop.1 → 13.4.0-develop.3

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.
Files changed (5) hide show
  1. package/dst/index.js +32 -75
  2. package/dst/index.js.map +1 -1
  3. package/dst/index.mjs +45 -88
  4. package/dst/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dst/index.js CHANGED
@@ -1851,7 +1851,6 @@ var RESOURCES = [
1851
1851
  var sx2 = {
1852
1852
  highlight: {
1853
1853
  mb: [2, 2, 3, 3],
1854
- mt: [3, 3, 0, 0],
1855
1854
  fontSize: [3, 3, 3, 4],
1856
1855
  fontFamily: "heading",
1857
1856
  letterSpacing: "smallcaps",
@@ -1867,7 +1866,7 @@ var SearchMenu = ({
1867
1866
  const destination = `/search?query=${value.trim()}`;
1868
1867
  (0, import_react21.useEffect)(() => {
1869
1868
  fetch("/resources.json").then((res) => res.json()).then((res) => {
1870
- if (res.length === 3 && res.every((el) => el.label && Array.isArray(el.links))) {
1869
+ if (res.every((el) => el.label && Array.isArray(el.links))) {
1871
1870
  setResources(res);
1872
1871
  }
1873
1872
  }).catch(() => {
@@ -1954,81 +1953,31 @@ var SearchMenu = ({
1954
1953
  row_default,
1955
1954
  {
1956
1955
  columns: [6, 6, 10, 10],
1957
- sx: { display: ["none", "grid", "grid", "grid"] }
1958
- },
1959
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 5, sx: { mt: [2, 2, 8, 8], mb: [1, 1, 4, 5] } }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h2", sx: { my: 0 } }, "Popular resources")),
1960
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [1, 1, 2, 2], width: 3 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
1961
- button_default,
1962
- {
1963
- key: href,
1964
- href,
1965
- size: "md",
1966
- sx: { mb: [1] },
1967
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
1968
- },
1969
- label
1970
- ))),
1971
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [4, 4, 5, 5], width: 3 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
1972
- button_default,
1973
- {
1974
- key: href,
1975
- href,
1976
- size: "md",
1977
- sx: { mb: [1] },
1978
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
1979
- },
1980
- label
1981
- ))),
1982
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: [1, 1, 8, 8], width: 3, sx: { mt: [0, 4, 0, 0] } }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
1983
- button_default,
1984
- {
1985
- key: href,
1986
- href,
1987
- size: "md",
1988
- sx: { mb: [1] },
1989
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
1990
- },
1991
- label
1992
- )))
1993
- ), /* @__PURE__ */ import_react21.default.createElement(
1994
- row_default,
1995
- {
1996
- columns: [6, 6, 10, 10],
1997
- sx: { display: ["grid", "none", "none", "none"] }
1956
+ sx: {
1957
+ mt: [6, 7, 8, 8],
1958
+ rowGap: [5, 4, 6, 7]
1959
+ }
1998
1960
  },
1999
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { as: "h2", variant: "styles.h3", sx: { my: 4 } }, "Popular resources"), /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[0].label), resources[0].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
2000
- button_default,
2001
- {
2002
- key: href,
2003
- href,
2004
- size: "xs",
2005
- sx: { mb: [1] },
2006
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
2007
- },
2008
- label
2009
- ))),
2010
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[1].label), resources[1].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
2011
- button_default,
2012
- {
2013
- key: href,
2014
- href,
2015
- size: "xs",
2016
- sx: { mb: [1] },
2017
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
2018
- },
2019
- label
2020
- ))),
2021
- /* @__PURE__ */ import_react21.default.createElement(column_default, { start: 1, width: 6 }, /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, resources[2].label), resources[2].links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
2022
- button_default,
1961
+ resources.map((group, i) => /* @__PURE__ */ import_react21.default.createElement(
1962
+ column_default,
2023
1963
  {
2024
- key: href,
2025
- href,
2026
- size: "xs",
2027
- sx: { mb: [1] },
2028
- suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
1964
+ start: [1, 1 + i * 3 % 6, 2 + i * 3 % 9, 2 + i * 3 % 9],
1965
+ width: [6, 3, 3, 3],
1966
+ key: group.label
2029
1967
  },
2030
- label
2031
- )))
1968
+ /* @__PURE__ */ import_react21.default.createElement(import_theme_ui19.Box, { sx: sx2.highlight }, group.label),
1969
+ group.links.map(({ label, href }) => /* @__PURE__ */ import_react21.default.createElement(
1970
+ button_default,
1971
+ {
1972
+ key: href,
1973
+ href,
1974
+ size: "md",
1975
+ sx: { mb: [1] },
1976
+ suffix: /* @__PURE__ */ import_react21.default.createElement(import_icons4.RotatingArrow, null)
1977
+ },
1978
+ label
1979
+ ))
1980
+ ))
2032
1981
  ));
2033
1982
  };
2034
1983
  var search_menu_default = SearchMenu;
@@ -2038,6 +1987,12 @@ var Header = ({ status, mode, nav, menuItems }) => {
2038
1987
  const [menuExpanded, setMenuExpanded] = (0, import_react22.useState)(false);
2039
1988
  const [searchExpanded, setSearchExpanded] = (0, import_react22.useState)(false);
2040
1989
  const expanded = searchExpanded || menuExpanded;
1990
+ (0, import_react22.useEffect)(() => {
1991
+ document.body.style.overflow = expanded ? "hidden" : "";
1992
+ return () => {
1993
+ document.body.style.overflow = "";
1994
+ };
1995
+ }, [expanded]);
2041
1996
  return /* @__PURE__ */ import_react22.default.createElement(
2042
1997
  row_default,
2043
1998
  {
@@ -2164,7 +2119,9 @@ var Header = ({ status, mode, nav, menuItems }) => {
2164
2119
  backgroundColor: "background",
2165
2120
  zIndex: 4e3,
2166
2121
  pt: ["79px"],
2167
- transition: "opacity 0.25s"
2122
+ transition: "opacity 0.25s",
2123
+ overflowY: "auto",
2124
+ overscrollBehavior: "contain"
2168
2125
  }
2169
2126
  },
2170
2127
  /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Container, null, /* @__PURE__ */ import_react22.default.createElement(row_default, null, menuExpanded && /* @__PURE__ */ import_react22.default.createElement(column_default, { start: [2, 4, 7, 7], width: [5, 4, 5, 5] }, /* @__PURE__ */ import_react22.default.createElement(import_theme_ui20.Box, { as: "nav", sx: { mt: [5, 5, 5, 6] } }, /* @__PURE__ */ import_react22.default.createElement(