@storybook/react-native-ui 8.4.4-alpha.0 → 8.4.5-alpha.0

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/dist/index.js +235 -169
  2. package/package.json +3 -3
  3. package/src/Layout.tsx +65 -29
  4. package/src/icon/CloseFullscreenIcon.tsx +19 -0
  5. package/src/icon/FullscreenIcon.tsx +16 -0
package/dist/index.js CHANGED
@@ -4494,7 +4494,7 @@ var Sidebar = import_react14.default.memo(function Sidebar2({
4494
4494
  // src/Layout.tsx
4495
4495
  var import_core_events = require("@storybook/core/core-events");
4496
4496
  var import_manager_api2 = require("@storybook/core/manager-api");
4497
- var import_react_native_theming15 = require("@storybook/react-native-theming");
4497
+ var import_react_native_theming17 = require("@storybook/react-native-theming");
4498
4498
  var import_react20 = require("react");
4499
4499
  var import_react_native9 = require("react-native");
4500
4500
  var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
@@ -4719,99 +4719,52 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
4719
4719
  }
4720
4720
  );
4721
4721
 
4722
- // src/icon/BottomBarToggleIcon.tsx
4723
- var import_react_native_svg10 = require("react-native-svg");
4724
- var import_jsx_runtime22 = require("react/jsx-runtime");
4725
- var BottomBarToggleIcon = ({
4726
- color = "currentColor",
4727
- width = 14,
4728
- height = 14,
4729
- ...props
4730
- }) => {
4731
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
4732
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4733
- import_react_native_svg10.Path,
4734
- {
4735
- d: "M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z",
4736
- fill: color
4737
- }
4738
- ),
4739
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4740
- import_react_native_svg10.Path,
4741
- {
4742
- fillRule: "evenodd",
4743
- clipRule: "evenodd",
4744
- d: "M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z",
4745
- fill: color
4746
- }
4747
- )
4748
- ] });
4749
- };
4750
-
4751
- // src/icon/MenuIcon.tsx
4752
- var import_react_native_svg11 = require("react-native-svg");
4753
- var import_jsx_runtime23 = require("react/jsx-runtime");
4754
- var MenuIcon = ({
4755
- color = "currentColor",
4756
- width = 14,
4757
- height = 14,
4758
- ...props
4759
- }) => {
4760
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4761
- import_react_native_svg11.Path,
4762
- {
4763
- d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
4764
- fill: color
4765
- }
4766
- ) });
4767
- };
4768
-
4769
4722
  // src/StorybookLogo.tsx
4770
4723
  var import_react17 = require("react");
4771
4724
  var import_react_native8 = require("react-native");
4772
4725
 
4773
4726
  // src/icon/DarkLogo.tsx
4774
- var import_react_native_svg12 = __toESM(require("react-native-svg"));
4775
- var import_jsx_runtime24 = require("react/jsx-runtime");
4727
+ var import_react_native_svg10 = __toESM(require("react-native-svg"));
4728
+ var import_jsx_runtime22 = require("react/jsx-runtime");
4776
4729
  function DarkLogo({ width = 300, height = 60, ...props }) {
4777
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4778
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.Defs, { children: [
4779
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4780
- import_react_native_svg12.Path,
4730
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4731
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.Defs, { children: [
4732
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4733
+ import_react_native_svg10.Path,
4781
4734
  {
4782
4735
  id: "a",
4783
4736
  d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
4784
4737
  }
4785
4738
  ),
4786
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4787
- import_react_native_svg12.Path,
4739
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4740
+ import_react_native_svg10.Path,
4788
4741
  {
4789
4742
  id: "c",
4790
4743
  d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
4791
4744
  }
4792
4745
  )
4793
4746
  ] }),
4794
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { fill: "none", fillRule: "evenodd", children: [
4795
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4796
- import_react_native_svg12.Path,
4747
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { fill: "none", fillRule: "evenodd", children: [
4748
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4749
+ import_react_native_svg10.Path,
4797
4750
  {
4798
4751
  fill: "#FFF",
4799
4752
  fillRule: "nonzero",
4800
4753
  d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
4801
4754
  }
4802
4755
  ),
4803
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4804
- import_react_native_svg12.Path,
4756
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4757
+ import_react_native_svg10.Path,
4805
4758
  {
4806
4759
  d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
4807
4760
  fill: "#FF4785",
4808
4761
  fillRule: "nonzero"
4809
4762
  }
4810
4763
  ),
4811
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
4812
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#a" }) }),
4813
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4814
- import_react_native_svg12.Path,
4764
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
4765
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Use, { xlinkHref: "#a" }) }),
4766
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4767
+ import_react_native_svg10.Path,
4815
4768
  {
4816
4769
  fill: "#FFF",
4817
4770
  fillRule: "nonzero",
@@ -4820,10 +4773,10 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
4820
4773
  }
4821
4774
  )
4822
4775
  ] }),
4823
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
4824
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native_svg12.Use, { xlinkHref: "#c" }) }),
4825
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4826
- import_react_native_svg12.Path,
4776
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.G, { transform: "translate(1)", children: [
4777
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_svg10.Use, { xlinkHref: "#c" }) }),
4778
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4779
+ import_react_native_svg10.Path,
4827
4780
  {
4828
4781
  fill: "#FFF",
4829
4782
  fillRule: "nonzero",
@@ -4837,47 +4790,47 @@ function DarkLogo({ width = 300, height = 60, ...props }) {
4837
4790
  }
4838
4791
 
4839
4792
  // src/icon/Logo.tsx
4840
- var import_react_native_svg13 = __toESM(require("react-native-svg"));
4841
- var import_jsx_runtime25 = require("react/jsx-runtime");
4793
+ var import_react_native_svg11 = __toESM(require("react-native-svg"));
4794
+ var import_jsx_runtime23 = require("react/jsx-runtime");
4842
4795
  function Logo({ width = 300, height = 60, ...props }) {
4843
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4844
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.Defs, { children: [
4845
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4846
- import_react_native_svg13.Path,
4796
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4797
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.Defs, { children: [
4798
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4799
+ import_react_native_svg11.Path,
4847
4800
  {
4848
4801
  id: "a",
4849
4802
  d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
4850
4803
  }
4851
4804
  ),
4852
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4853
- import_react_native_svg13.Path,
4805
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4806
+ import_react_native_svg11.Path,
4854
4807
  {
4855
4808
  id: "c",
4856
4809
  d: "M1.848 54.92L.002 5.723A2.997 2.997 0 012.81 2.621L44.654.006a2.997 2.997 0 013.183 2.99v53.607a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882z"
4857
4810
  }
4858
4811
  )
4859
4812
  ] }),
4860
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { fill: "none", fillRule: "evenodd", children: [
4861
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4862
- import_react_native_svg13.Path,
4813
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { fill: "none", fillRule: "evenodd", children: [
4814
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4815
+ import_react_native_svg11.Path,
4863
4816
  {
4864
4817
  fill: "#333",
4865
4818
  fillRule: "nonzero",
4866
4819
  d: "M80.387 47.178c-2.543 0-4.99-.342-7.343-1.025-2.352-.684-4.307-1.63-5.864-2.837l2.384-5.293c3.242 2.257 6.882 3.386 10.919 3.386 2.097 0 3.71-.342 4.84-1.026 1.128-.683 1.692-1.629 1.692-2.836 0-1.081-.517-1.924-1.55-2.528-1.033-.603-2.869-1.192-5.507-1.764-2.956-.604-5.316-1.335-7.08-2.193-1.765-.858-3.052-1.915-3.862-3.17-.811-1.256-1.216-2.806-1.216-4.65 0-2.034.564-3.846 1.692-5.435 1.129-1.59 2.71-2.837 4.744-3.743 2.035-.906 4.387-1.359 7.057-1.359 2.384 0 4.68.35 6.89 1.05 2.21.699 3.965 1.636 5.269 2.812l-2.384 5.293c-3.084-2.257-6.326-3.385-9.727-3.385-1.94 0-3.465.373-4.577 1.12-1.113.747-1.67 1.772-1.67 3.075 0 .763.215 1.391.644 1.884.43.492 1.145.93 2.146 1.31 1.001.382 2.424.78 4.267 1.193 4.323.954 7.43 2.177 9.322 3.671 1.891 1.494 2.837 3.56 2.837 6.199 0 3.178-1.224 5.682-3.672 7.51-2.447 1.827-5.864 2.74-10.25 2.74zm31.183-5.34c.731 0 1.494-.048 2.289-.143l-.382 5.244c-.922.128-1.844.191-2.765.191-3.56 0-6.159-.779-7.796-2.336-1.637-1.558-2.456-3.926-2.456-7.104v-8.964h-4.434v-5.388h4.434v-6.866h7.2v6.866h5.865v5.388h-5.865v8.916c0 2.797 1.303 4.196 3.91 4.196zm16.736 5.292c-2.48 0-4.657-.5-6.533-1.502-1.875-1.001-3.321-2.416-4.338-4.243-1.018-1.828-1.526-3.982-1.526-6.46 0-2.48.508-4.634 1.526-6.462 1.017-1.827 2.463-3.234 4.338-4.22 1.876-.985 4.053-1.477 6.533-1.477 2.479 0 4.656.492 6.532 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.531 1.502zm0-5.483c3.496 0 5.244-2.24 5.244-6.723 0-2.257-.453-3.941-1.358-5.054-.906-1.113-2.202-1.669-3.886-1.669-3.497 0-5.245 2.241-5.245 6.723 0 4.482 1.748 6.723 5.245 6.723zm32.327-12.969l-4.053.43c-2.003.19-3.417.754-4.244 1.692-.826.938-1.24 2.185-1.24 3.743v12.206h-7.199V23.338h6.914v3.957c1.176-2.702 3.607-4.18 7.295-4.434l2.098-.143.429 5.96zm20.92-5.292h7.056L174.496 55.33H167.2l4.481-9.87-9.63-22.075h7.485l5.912 14.876 6.103-14.876zm23.744-.62c2.034 0 3.83.492 5.388 1.478 1.557.985 2.773 2.392 3.647 4.22.874 1.827 1.311 3.949 1.311 6.365 0 2.416-.437 4.553-1.31 6.413-.875 1.86-2.099 3.306-3.672 4.339-1.574 1.033-3.362 1.55-5.364 1.55-1.621 0-3.083-.343-4.387-1.026-1.303-.683-2.304-1.629-3.004-2.837v3.48h-7.104V13.135h7.2v13.35c.7-1.175 1.692-2.09 2.98-2.74 1.287-.652 2.726-.978 4.315-.978zm-2.098 18.881c1.685 0 2.988-.596 3.91-1.788.922-1.192 1.382-2.869 1.382-5.03 0-2.13-.46-3.759-1.382-4.887-.922-1.129-2.225-1.693-3.91-1.693s-2.988.58-3.91 1.74c-.922 1.16-1.383 2.805-1.383 4.935 0 2.162.461 3.822 1.383 4.983.922 1.16 2.225 1.74 3.91 1.74zm28.083 5.483c-2.479 0-4.656-.5-6.532-1.502-1.875-1.001-3.321-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.018-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.533 1.478 1.875.985 3.321 2.392 4.339 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.525 6.46c-1.018 1.828-2.464 3.243-4.34 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.2-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zm26.844 5.483c-2.48 0-4.656-.5-6.532-1.502-1.875-1.001-3.322-2.416-4.339-4.243-1.017-1.828-1.525-3.982-1.525-6.46 0-2.48.508-4.634 1.525-6.462 1.017-1.827 2.464-3.234 4.34-4.22 1.875-.985 4.052-1.477 6.531-1.477 2.48 0 4.657.492 6.532 1.478 1.876.985 3.322 2.392 4.34 4.22 1.017 1.827 1.525 3.98 1.525 6.46s-.508 4.633-1.526 6.46c-1.017 1.828-2.463 3.243-4.339 4.244-1.875 1.002-4.052 1.502-6.532 1.502zm0-5.483c3.497 0 5.245-2.24 5.245-6.723 0-2.257-.453-3.941-1.359-5.054-.906-1.113-2.201-1.669-3.886-1.669-3.496 0-5.244 2.241-5.244 6.723 0 4.482 1.748 6.723 5.244 6.723zM299 46.749h-8.82l-8.965-10.442v10.442h-7.2V13.134h7.2v20.217l8.63-9.965h8.583l-9.822 11.157L299 46.749z"
4867
4820
  }
4868
4821
  ),
4869
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4870
- import_react_native_svg13.Path,
4822
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4823
+ import_react_native_svg11.Path,
4871
4824
  {
4872
4825
  d: "M48.831 2.81c.004.062.006.124.006.187v53.606a2.997 2.997 0 01-3.13 2.994l-40-1.796a2.997 2.997 0 01-2.86-2.882L1.002 5.724A2.997 2.997 0 013.81 2.621L36.609.57l-.285 6.756a.447.447 0 00.05.223l.04.066c.15.196.43.235.627.085l2.623-1.99 2.217 1.746a.447.447 0 00.723-.367L42.356.211l3.298-.205A2.997 2.997 0 0148.83 2.81z",
4873
4826
  fill: "#FF4785",
4874
4827
  fillRule: "nonzero"
4875
4828
  }
4876
4829
  ),
4877
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { transform: "translate(1)", children: [
4878
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Use, { xlinkHref: "#a" }) }),
4879
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4880
- import_react_native_svg13.Path,
4830
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
4831
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "b", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#a" }) }),
4832
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4833
+ import_react_native_svg11.Path,
4881
4834
  {
4882
4835
  fill: "#FFF",
4883
4836
  fillRule: "nonzero",
@@ -4886,10 +4839,10 @@ function Logo({ width = 300, height = 60, ...props }) {
4886
4839
  }
4887
4840
  )
4888
4841
  ] }),
4889
- /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_native_svg13.G, { transform: "translate(1)", children: [
4890
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Use, { xlinkHref: "#c" }) }),
4891
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4892
- import_react_native_svg13.Path,
4842
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
4843
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Mask, { id: "d", fill: "#fff", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native_svg11.Use, { xlinkHref: "#c" }) }),
4844
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4845
+ import_react_native_svg11.Path,
4893
4846
  {
4894
4847
  fill: "#FFF",
4895
4848
  fillRule: "nonzero",
@@ -4903,10 +4856,10 @@ function Logo({ width = 300, height = 60, ...props }) {
4903
4856
  }
4904
4857
 
4905
4858
  // src/StorybookLogo.tsx
4906
- var import_jsx_runtime26 = require("react/jsx-runtime");
4859
+ var import_jsx_runtime24 = require("react/jsx-runtime");
4907
4860
  var WIDTH = 125;
4908
4861
  var HEIGHT = 25;
4909
- var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
4862
+ var NoBrandLogo = ({ theme }) => theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Logo, { height: HEIGHT, width: WIDTH }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DarkLogo, { height: HEIGHT, width: WIDTH });
4910
4863
  function isElement(value) {
4911
4864
  return (0, import_react17.isValidElement)(value);
4912
4865
  }
@@ -4925,7 +4878,7 @@ var BrandLogo = ({ theme }) => {
4925
4878
  if (isElement(theme.brand.image)) {
4926
4879
  return theme.brand.image;
4927
4880
  }
4928
- const image = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4881
+ const image = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4929
4882
  import_react_native8.Image,
4930
4883
  {
4931
4884
  source: theme.brand.image,
@@ -4934,7 +4887,7 @@ var BrandLogo = ({ theme }) => {
4934
4887
  }
4935
4888
  );
4936
4889
  if (theme.brand.url) {
4937
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4890
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4938
4891
  import_react_native8.TouchableOpacity,
4939
4892
  {
4940
4893
  onPress: () => {
@@ -4957,9 +4910,9 @@ var BrandTitle = ({ theme }) => {
4957
4910
  fontSize: theme.typography.size.m1
4958
4911
  };
4959
4912
  }, [theme]);
4960
- const title = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
4913
+ const title = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.Text, { style: brandTitleStyle, numberOfLines: 1, ellipsizeMode: "tail", children: theme.brand.title });
4961
4914
  if (theme.brand.url) {
4962
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4915
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4963
4916
  import_react_native8.TouchableOpacity,
4964
4917
  {
4965
4918
  onPress: () => {
@@ -4975,11 +4928,11 @@ var BrandTitle = ({ theme }) => {
4975
4928
  };
4976
4929
  var StorybookLogo = ({ theme }) => {
4977
4930
  if (theme.brand?.image) {
4978
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BrandLogo, { theme });
4931
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandLogo, { theme });
4979
4932
  } else if (theme.brand?.title) {
4980
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BrandTitle, { theme });
4933
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(BrandTitle, { theme });
4981
4934
  } else {
4982
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NoBrandLogo, { theme });
4935
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NoBrandLogo, { theme });
4983
4936
  }
4984
4937
  };
4985
4938
 
@@ -4988,7 +4941,7 @@ var import_react19 = require("react");
4988
4941
 
4989
4942
  // src/StorageProvider.tsx
4990
4943
  var import_react18 = require("react");
4991
- var import_jsx_runtime27 = require("react/jsx-runtime");
4944
+ var import_jsx_runtime25 = require("react/jsx-runtime");
4992
4945
  var StorageContext = (0, import_react18.createContext)({
4993
4946
  getItem: async () => null,
4994
4947
  setItem: async () => {
@@ -4998,7 +4951,7 @@ var StorageProvider = ({
4998
4951
  storage,
4999
4952
  children
5000
4953
  }) => {
5001
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(StorageContext.Provider, { value: storage, children });
4954
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StorageContext.Provider, { value: storage, children });
5002
4955
  };
5003
4956
  var useStorage = () => (0, import_react18.useContext)(StorageContext);
5004
4957
 
@@ -5021,14 +4974,95 @@ var useStoreBooleanState = (key, defaultValue) => {
5021
4974
  return [val, setVal];
5022
4975
  };
5023
4976
 
5024
- // src/Layout.tsx
4977
+ // src/icon/BottomBarToggleIcon.tsx
4978
+ var import_react_native_svg12 = require("react-native-svg");
4979
+ var import_jsx_runtime26 = require("react/jsx-runtime");
4980
+ var BottomBarToggleIcon = ({
4981
+ color = "currentColor",
4982
+ width = 14,
4983
+ height = 14,
4984
+ ...props
4985
+ }) => {
4986
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native_svg12.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
4987
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4988
+ import_react_native_svg12.Path,
4989
+ {
4990
+ d: "M3.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1zM6 10.504a.5.5 0 01.5-.5h1a.5.5 0 010 1h-1a.5.5 0 01-.5-.5zM9.5 10.004a.5.5 0 000 1h1a.5.5 0 000-1h-1z",
4991
+ fill: color
4992
+ }
4993
+ ),
4994
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4995
+ import_react_native_svg12.Path,
4996
+ {
4997
+ fillRule: "evenodd",
4998
+ clipRule: "evenodd",
4999
+ d: "M1 12.504v-11a.5.5 0 01.5-.5h11a.5.5 0 01.5.5v11a.5.5 0 01-.5.5h-11a.5.5 0 01-.5-.5zm1-.5v-3h10v3H2zm4.5-4H2v-6h10v6H7.5V5.21l.646.646a.5.5 0 10.708-.707l-1.5-1.5a.5.5 0 00-.708 0l-1.5 1.5a.5.5 0 10.708.707l.646-.646v2.793z",
5000
+ fill: color
5001
+ }
5002
+ )
5003
+ ] });
5004
+ };
5005
+
5006
+ // src/icon/CloseFullscreenIcon.tsx
5007
+ var import_react_native_svg13 = __toESM(require("react-native-svg"));
5008
+ var import_react_native_theming15 = require("@storybook/react-native-theming");
5009
+ var import_jsx_runtime27 = require("react/jsx-runtime");
5010
+ function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }) {
5011
+ const theme = (0, import_react_native_theming15.useTheme)();
5012
+ return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
5013
+ import_react_native_svg13.default,
5014
+ {
5015
+ fill: color ?? theme.color.defaultText,
5016
+ height,
5017
+ viewBox: "0 0 16 16",
5018
+ width,
5019
+ ...props,
5020
+ children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_native_svg13.Path, { d: "M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" })
5021
+ }
5022
+ );
5023
+ }
5024
+
5025
+ // src/icon/FullscreenIcon.tsx
5026
+ var import_react_native_svg14 = __toESM(require("react-native-svg"));
5027
+ var import_react_native_theming16 = require("@storybook/react-native-theming");
5025
5028
  var import_jsx_runtime28 = require("react/jsx-runtime");
5029
+ function FullscreenIcon({ color, width = 14, height = 14, ...props }) {
5030
+ const theme = (0, import_react_native_theming16.useTheme)();
5031
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native_svg14.default, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5032
+ import_react_native_svg14.Path,
5033
+ {
5034
+ d: "M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z",
5035
+ fill: color ?? theme.color.defaultText
5036
+ }
5037
+ ) });
5038
+ }
5039
+
5040
+ // src/icon/MenuIcon.tsx
5041
+ var import_react_native_svg15 = require("react-native-svg");
5042
+ var import_jsx_runtime29 = require("react/jsx-runtime");
5043
+ var MenuIcon = ({
5044
+ color = "currentColor",
5045
+ width = 14,
5046
+ height = 14,
5047
+ ...props
5048
+ }) => {
5049
+ return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native_svg15.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
5050
+ import_react_native_svg15.Path,
5051
+ {
5052
+ d: "M13 3.5a.5.5 0 010 1H1a.5.5 0 010-1h12zM13.5 10a.5.5 0 00-.5-.5H1a.5.5 0 000 1h12a.5.5 0 00.5-.5zM13 6.5a.5.5 0 010 1H1a.5.5 0 010-1h12z",
5053
+ fill: color
5054
+ }
5055
+ ) });
5056
+ };
5057
+
5058
+ // src/Layout.tsx
5059
+ var import_jsx_runtime30 = require("react/jsx-runtime");
5026
5060
  var Layout = ({
5027
5061
  storyHash,
5028
5062
  story,
5029
5063
  children
5030
5064
  }) => {
5031
- const theme = (0, import_react_native_theming15.useTheme)();
5065
+ const theme = (0, import_react_native_theming17.useTheme)();
5032
5066
  const mobileMenuDrawerRef = (0, import_react20.useRef)(null);
5033
5067
  const addonPanelRef = (0, import_react20.useRef)(null);
5034
5068
  const insets = (0, import_react_native_safe_area_context3.useSafeAreaInsets)();
@@ -5041,8 +5075,9 @@ var Layout = ({
5041
5075
  "desktopPanelState",
5042
5076
  true
5043
5077
  );
5078
+ const [uiHidden, setUiHidden] = (0, import_react20.useState)(false);
5044
5079
  if (isDesktop) {
5045
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
5080
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5046
5081
  import_react_native9.View,
5047
5082
  {
5048
5083
  style: {
@@ -5052,7 +5087,7 @@ var Layout = ({
5052
5087
  flexDirection: "row"
5053
5088
  },
5054
5089
  children: [
5055
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5090
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5056
5091
  import_react_native9.View,
5057
5092
  {
5058
5093
  style: {
@@ -5061,7 +5096,7 @@ var Layout = ({
5061
5096
  borderColor: theme.appBorderColor,
5062
5097
  borderRightWidth: 1
5063
5098
  },
5064
- children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
5099
+ children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5065
5100
  import_react_native9.ScrollView,
5066
5101
  {
5067
5102
  keyboardShouldPersistTaps: "handled",
@@ -5069,7 +5104,7 @@ var Layout = ({
5069
5104
  paddingBottom: insets.bottom
5070
5105
  },
5071
5106
  children: [
5072
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
5107
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5073
5108
  import_react_native9.View,
5074
5109
  {
5075
5110
  style: {
@@ -5082,12 +5117,12 @@ var Layout = ({
5082
5117
  justifyContent: "space-between"
5083
5118
  },
5084
5119
  children: [
5085
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StorybookLogo, { theme }),
5086
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
5120
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }),
5121
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
5087
5122
  ]
5088
5123
  }
5089
5124
  ),
5090
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5125
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5091
5126
  Sidebar,
5092
5127
  {
5093
5128
  extra: [],
@@ -5106,12 +5141,12 @@ var Layout = ({
5106
5141
  )
5107
5142
  ]
5108
5143
  }
5109
- ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
5144
+ ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
5110
5145
  }
5111
5146
  ),
5112
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.View, { style: { flex: 1 }, children: [
5113
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
5114
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5147
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: { flex: 1 }, children: [
5148
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
5149
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5115
5150
  import_react_native9.View,
5116
5151
  {
5117
5152
  style: {
@@ -5121,7 +5156,7 @@ var Layout = ({
5121
5156
  paddingTop: desktopAddonsPanelOpen ? 4 : 0,
5122
5157
  padding: desktopAddonsPanelOpen ? 0 : 10
5123
5158
  },
5124
- children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5159
+ children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5125
5160
  IconButton,
5126
5161
  {
5127
5162
  style: { marginLeft: "auto" },
@@ -5136,59 +5171,90 @@ var Layout = ({
5136
5171
  }
5137
5172
  );
5138
5173
  }
5139
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
5140
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children }),
5141
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(Nav, { children: [
5142
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
5143
- Button2,
5144
- {
5145
- style: { flexShrink: 1 },
5146
- hitSlop: { bottom: 10, left: 10, right: 10, top: 10 },
5147
- onPress: () => {
5148
- mobileMenuDrawerRef.current.setMobileMenuOpen(true);
5149
- },
5150
- children: [
5151
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuIcon, { color: theme.color.mediumdark }),
5152
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_native9.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
5153
- story?.title,
5154
- "/",
5155
- story?.name
5156
- ] })
5157
- ]
5158
- }
5159
- ),
5160
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5161
- IconButton,
5162
- {
5163
- onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
5164
- Icon: BottomBarToggleIcon
5165
- }
5166
- )
5167
- ] }) }),
5168
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
5169
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(StorybookLogo, { theme }) }),
5170
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
5171
- Sidebar,
5172
- {
5173
- extra: [],
5174
- previewInitialized: true,
5175
- indexError: void 0,
5176
- refs: {},
5177
- setSelection: ({ storyId: newStoryId }) => {
5178
- const channel = import_manager_api2.addons.getChannel();
5179
- channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
5180
- },
5181
- status: {},
5182
- index: storyHash,
5183
- storyId: story?.id,
5184
- refId: DEFAULT_REF_ID
5185
- }
5186
- )
5187
- ] }),
5188
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id })
5189
- ] });
5174
+ return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5175
+ import_react_native9.View,
5176
+ {
5177
+ style: {
5178
+ flex: 1,
5179
+ paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
5180
+ backgroundColor: theme.background.content
5181
+ },
5182
+ children: [
5183
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.View, { style: { flex: 1, overflow: "hidden" }, children: [
5184
+ children,
5185
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5186
+ import_react_native9.TouchableOpacity,
5187
+ {
5188
+ style: {
5189
+ position: "absolute",
5190
+ bottom: uiHidden ? 56 + insets.bottom : 16,
5191
+ right: 16,
5192
+ backgroundColor: "white",
5193
+ padding: 4,
5194
+ borderRadius: 4,
5195
+ borderWidth: 1,
5196
+ borderColor: theme.appBorderColor
5197
+ },
5198
+ onPress: () => setUiHidden((prev) => !prev),
5199
+ children: uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(CloseFullscreenIcon, { color: theme.color.mediumdark }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(FullscreenIcon, { color: theme.color.mediumdark })
5200
+ }
5201
+ )
5202
+ ] }),
5203
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, children: [
5204
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_native9.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(StorybookLogo, { theme }) }),
5205
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5206
+ Sidebar,
5207
+ {
5208
+ extra: [],
5209
+ previewInitialized: true,
5210
+ indexError: void 0,
5211
+ refs: {},
5212
+ setSelection: ({ storyId: newStoryId }) => {
5213
+ const channel = import_manager_api2.addons.getChannel();
5214
+ channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
5215
+ },
5216
+ status: {},
5217
+ index: storyHash,
5218
+ storyId: story?.id,
5219
+ refId: DEFAULT_REF_ID
5220
+ }
5221
+ )
5222
+ ] }),
5223
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id }),
5224
+ !uiHidden ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(Nav, { children: [
5225
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
5226
+ Button2,
5227
+ {
5228
+ testID: "mobile-menu-button",
5229
+ style: { flexShrink: 1 },
5230
+ hitSlop: { bottom: 10, left: 10, right: 10, top: 10 },
5231
+ onPress: () => {
5232
+ mobileMenuDrawerRef.current.setMobileMenuOpen(true);
5233
+ },
5234
+ children: [
5235
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuIcon, { color: theme.color.mediumdark }),
5236
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_native9.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
5237
+ story?.title,
5238
+ "/",
5239
+ story?.name
5240
+ ] })
5241
+ ]
5242
+ }
5243
+ ),
5244
+ /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
5245
+ IconButton,
5246
+ {
5247
+ testID: "mobile-addons-button",
5248
+ onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
5249
+ Icon: BottomBarToggleIcon
5250
+ }
5251
+ )
5252
+ ] }) }) : null
5253
+ ]
5254
+ }
5255
+ );
5190
5256
  };
5191
- var Nav = import_react_native_theming15.styled.View({
5257
+ var Nav = import_react_native_theming17.styled.View({
5192
5258
  display: "flex",
5193
5259
  flexDirection: "row",
5194
5260
  alignItems: "center",
@@ -5197,14 +5263,14 @@ var Nav = import_react_native_theming15.styled.View({
5197
5263
  height: 40,
5198
5264
  paddingHorizontal: 12
5199
5265
  });
5200
- var Container3 = import_react_native_theming15.styled.View(({ theme }) => ({
5266
+ var Container3 = import_react_native_theming17.styled.View(({ theme }) => ({
5201
5267
  alignSelf: "flex-end",
5202
5268
  width: "100%",
5203
5269
  backgroundColor: theme.barBg,
5204
5270
  borderTopColor: theme.appBorderColor,
5205
5271
  borderTopWidth: 1
5206
5272
  }));
5207
- var Button2 = import_react_native_theming15.styled.TouchableOpacity(({ theme }) => ({
5273
+ var Button2 = import_react_native_theming17.styled.TouchableOpacity(({ theme }) => ({
5208
5274
  display: "flex",
5209
5275
  flexDirection: "row",
5210
5276
  alignItems: "center",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react-native-ui",
3
- "version": "8.4.4-alpha.0",
3
+ "version": "8.4.5-alpha.0",
4
4
  "description": "ui components for react native storybook",
5
5
  "keywords": [
6
6
  "react",
@@ -60,7 +60,7 @@
60
60
  "dependencies": {
61
61
  "@storybook/core": "^8.4.2",
62
62
  "@storybook/react": "^8.4.2",
63
- "@storybook/react-native-theming": "^8.4.4-alpha.0",
63
+ "@storybook/react-native-theming": "^8.4.5-alpha.0",
64
64
  "fuse.js": "^7.0.0",
65
65
  "memoizerific": "^1.11.3",
66
66
  "polished": "^4.3.1",
@@ -81,5 +81,5 @@
81
81
  "publishConfig": {
82
82
  "access": "public"
83
83
  },
84
- "gitHead": "a6661021cbcb55cc59455ce5a5cd18d8ac06498d"
84
+ "gitHead": "685d3f7f9591fba209b3f7a94b8918660ab81f24"
85
85
  }
package/src/Layout.tsx CHANGED
@@ -3,20 +3,21 @@ import { addons } from '@storybook/core/manager-api';
3
3
  import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
4
4
  import type { ReactRenderer } from '@storybook/react';
5
5
  import { styled, useTheme } from '@storybook/react-native-theming';
6
- import { ReactNode, useRef } from 'react';
7
- import { ScrollView, Text, View } from 'react-native';
6
+ import { ReactNode, useRef, useState } from 'react';
7
+ import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
8
8
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
9
9
  import { IconButton } from './IconButton';
10
10
  import { useLayout } from './LayoutProvider';
11
11
  import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
12
12
  import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
13
13
  import { Sidebar } from './Sidebar';
14
+ import { StorybookLogo } from './StorybookLogo';
14
15
  import { DEFAULT_REF_ID } from './constants';
16
+ import { useStoreBooleanState } from './hooks/useStoreState';
15
17
  import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
16
-
18
+ import { CloseFullscreenIcon } from './icon/CloseFullscreenIcon';
19
+ import { FullscreenIcon } from './icon/FullscreenIcon';
17
20
  import { MenuIcon } from './icon/MenuIcon';
18
- import { StorybookLogo } from './StorybookLogo';
19
- import { useStoreBooleanState } from './hooks/useStoreState';
20
21
 
21
22
  export const Layout = ({
22
23
  storyHash,
@@ -43,6 +44,8 @@ export const Layout = ({
43
44
  true
44
45
  );
45
46
 
47
+ const [uiHidden, setUiHidden] = useState(false);
48
+
46
49
  if (isDesktop) {
47
50
  return (
48
51
  <View
@@ -133,35 +136,42 @@ export const Layout = ({
133
136
  }
134
137
 
135
138
  return (
136
- <View style={{ flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }}>
137
- <View style={{ flex: 1, overflow: 'hidden' }}>{children}</View>
138
-
139
- <Container style={{ marginBottom: insets.bottom }}>
140
- <Nav>
141
- <Button
142
- style={{ flexShrink: 1 }}
143
- hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
144
- onPress={() => {
145
- mobileMenuDrawerRef.current.setMobileMenuOpen(true);
146
- }}
147
- >
148
- <MenuIcon color={theme.color.mediumdark} />
149
- <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
150
- {story?.title}/{story?.name}
151
- </Text>
152
- </Button>
153
-
154
- <IconButton
155
- onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
156
- Icon={BottomBarToggleIcon}
157
- />
158
- </Nav>
159
- </Container>
139
+ <View
140
+ style={{
141
+ flex: 1,
142
+ paddingTop: story?.parameters?.noSafeArea ? 0 : insets.top,
143
+ backgroundColor: theme.background.content,
144
+ }}
145
+ >
146
+ <View style={{ flex: 1, overflow: 'hidden' }}>
147
+ {children}
148
+
149
+ <TouchableOpacity
150
+ style={{
151
+ position: 'absolute',
152
+ bottom: uiHidden ? 56 + insets.bottom : 16,
153
+ right: 16,
154
+ backgroundColor: 'white',
155
+ padding: 4,
156
+ borderRadius: 4,
157
+ borderWidth: 1,
158
+ borderColor: theme.appBorderColor,
159
+ }}
160
+ onPress={() => setUiHidden((prev) => !prev)}
161
+ >
162
+ {uiHidden ? (
163
+ <CloseFullscreenIcon color={theme.color.mediumdark} />
164
+ ) : (
165
+ <FullscreenIcon color={theme.color.mediumdark} />
166
+ )}
167
+ </TouchableOpacity>
168
+ </View>
160
169
 
161
170
  <MobileMenuDrawer ref={mobileMenuDrawerRef}>
162
171
  <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
163
172
  <StorybookLogo theme={theme} />
164
173
  </View>
174
+
165
175
  <Sidebar
166
176
  extra={[]}
167
177
  previewInitialized
@@ -180,6 +190,32 @@ export const Layout = ({
180
190
  </MobileMenuDrawer>
181
191
 
182
192
  <MobileAddonsPanel ref={addonPanelRef} storyId={story?.id} />
193
+
194
+ {!uiHidden ? (
195
+ <Container style={{ marginBottom: insets.bottom }}>
196
+ <Nav>
197
+ <Button
198
+ testID="mobile-menu-button"
199
+ style={{ flexShrink: 1 }}
200
+ hitSlop={{ bottom: 10, left: 10, right: 10, top: 10 }}
201
+ onPress={() => {
202
+ mobileMenuDrawerRef.current.setMobileMenuOpen(true);
203
+ }}
204
+ >
205
+ <MenuIcon color={theme.color.mediumdark} />
206
+ <Text style={{ flexShrink: 1, color: theme.color.defaultText }} numberOfLines={1}>
207
+ {story?.title}/{story?.name}
208
+ </Text>
209
+ </Button>
210
+
211
+ <IconButton
212
+ testID="mobile-addons-button"
213
+ onPress={() => addonPanelRef.current.setAddonsPanelOpen(true)}
214
+ Icon={BottomBarToggleIcon}
215
+ />
216
+ </Nav>
217
+ </Container>
218
+ ) : null}
183
219
  </View>
184
220
  );
185
221
  };
package/src/icon/CloseFullscreenIcon.tsx ADDED
@@ -0,0 +1,19 @@
1
+ import * as React from 'react';
2
+ import Svg, { Path, SvgProps } from 'react-native-svg';
3
+ import { useTheme } from '@storybook/react-native-theming';
4
+
5
+ export function CloseFullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
6
+ const theme = useTheme();
7
+
8
+ return (
9
+ <Svg
10
+ fill={color ?? theme.color.defaultText}
11
+ height={height}
12
+ viewBox="0 0 16 16"
13
+ width={width}
14
+ {...props}
15
+ >
16
+ <Path d="M5.5 0a.5.5 0 01.5.5v4A1.5 1.5 0 014.5 6h-4a.5.5 0 010-1h4a.5.5 0 00.5-.5v-4a.5.5 0 01.5-.5zm5 0a.5.5 0 01.5.5v4a.5.5 0 00.5.5h4a.5.5 0 010 1h-4A1.5 1.5 0 0110 4.5v-4a.5.5 0 01.5-.5zM0 10.5a.5.5 0 01.5-.5h4A1.5 1.5 0 016 11.5v4a.5.5 0 01-1 0v-4a.5.5 0 00-.5-.5h-4a.5.5 0 01-.5-.5zm10 1a1.5 1.5 0 011.5-1.5h4a.5.5 0 010 1h-4a.5.5 0 00-.5.5v4a.5.5 0 01-1 0v-4z" />
17
+ </Svg>
18
+ );
19
+ }
package/src/icon/FullscreenIcon.tsx ADDED
@@ -0,0 +1,16 @@
1
+ import * as React from 'react';
2
+ import Svg, { Path, SvgProps } from 'react-native-svg';
3
+ import { useTheme } from '@storybook/react-native-theming';
4
+
5
+ export function FullscreenIcon({ color, width = 14, height = 14, ...props }: SvgProps) {
6
+ const theme = useTheme();
7
+
8
+ return (
9
+ <Svg width={width} height={height} viewBox="0 0 14 14" fill="none" {...props}>
10
+ <Path
11
+ d="M1.5 1h2a.5.5 0 010 1h-.793l3.147 3.146a.5.5 0 11-.708.708L2 2.707V3.5a.5.5 0 01-1 0v-2a.5.5 0 01.5-.5zm8.5.5a.5.5 0 01.5-.5h2a.5.5 0 01.5.5v2a.5.5 0 01-1 0v-.793L8.854 5.854a.5.5 0 11-.708-.708L11.293 2H10.5a.5.5 0 01-.5-.5zm2.5 8.5a.5.5 0 01.5.5v2a.5.5 0 01-.5.5h-2a.5.5 0 010-1h.793L8.146 8.854a.5.5 0 11.708-.708L12 11.293V10.5a.5.5 0 01.5-.5zM2 11.293V10.5a.5.5 0 00-1 0v2a.5.5 0 00.5.5h2a.5.5 0 000-1h-.793l3.147-3.146a.5.5 0 10-.708-.708L2 11.293z"
12
+ fill={color ?? theme.color.defaultText}
13
+ />
14
+ </Svg>
15
+ );
16
+ }