@storybook/react-native-ui 8.3.1-beta.1 → 8.3.1-beta.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.
package/dist/index.d.ts CHANGED
@@ -17,7 +17,7 @@ interface NodeProps$1 {
17
17
  }
18
18
  declare const BranchNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & {
19
19
  theme?: _storybook_react_native_theming.Theme;
20
- as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
20
+ as?: React__default.ElementType;
21
21
  } & {
22
22
  depth?: number;
23
23
  isExpandable?: boolean;
@@ -29,7 +29,7 @@ declare const BranchNode: _storybook_react_native_theming.StyledComponent<react_
29
29
  }>;
30
30
  declare const LeafNode: _storybook_react_native_theming.StyledComponent<react_native.TouchableOpacityProps & {
31
31
  theme?: _storybook_react_native_theming.Theme;
32
- as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
32
+ as?: React__default.ElementType;
33
33
  } & {
34
34
  depth?: number;
35
35
  selected?: boolean;
@@ -118,26 +118,26 @@ interface NodeProps {
118
118
  declare const Node: React__default.NamedExoticComponent<NodeProps>;
119
119
  declare const LeafNodeStyleWrapper: _storybook_react_native_theming.StyledComponent<react_native.ViewProps & {
120
120
  theme?: _storybook_react_native_theming.Theme;
121
- as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
121
+ as?: React__default.ElementType;
122
122
  }, {}, {
123
123
  ref?: React__default.Ref<View>;
124
124
  }>;
125
125
  declare const RootNode: _storybook_react_native_theming.StyledComponent<react_native.ViewProps & {
126
126
  theme?: _storybook_react_native_theming.Theme;
127
- as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
127
+ as?: React__default.ElementType;
128
128
  }, {}, {
129
129
  ref?: React__default.Ref<View>;
130
130
  }>;
131
131
  declare const RootNodeText: _storybook_react_native_theming.StyledComponent<react_native.TextProps & {
132
132
  theme?: _storybook_react_native_theming.Theme;
133
- as?: React__default.ElementType<any, keyof React__default.JSX.IntrinsicElements>;
133
+ as?: React__default.ElementType;
134
134
  }, {}, {
135
135
  ref?: React__default.Ref<react_native.Text>;
136
136
  }>;
137
137
  declare const Tree: React__default.NamedExoticComponent<{
138
138
  isBrowsing: boolean;
139
139
  isMain: boolean;
140
- status?: State['status'];
140
+ status?: State["status"];
141
141
  refId: string;
142
142
  data: StoriesHash;
143
143
  docsMode: boolean;
@@ -159,17 +159,17 @@ interface ButtonProps extends TouchableOpacityProps {
159
159
  declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<TouchableOpacity>>;
160
160
  declare const ButtonText: _storybook_react_native_theming.StyledComponent<react_native.TextProps & {
161
161
  theme?: _storybook_react_native_theming.Theme;
162
- as?: React$1.ElementType<any, keyof React$1.JSX.IntrinsicElements>;
162
+ as?: React.ElementType;
163
163
  } & {
164
- variant: ButtonProps['variant'];
165
- active: ButtonProps['active'];
164
+ variant: ButtonProps["variant"];
165
+ active: ButtonProps["active"];
166
166
  }, {}, {
167
167
  ref?: React$1.Ref<react_native.Text>;
168
168
  }>;
169
169
  declare const ButtonIcon: ({ Icon, active, variant, }: {
170
170
  Icon: (props: SvgProps) => ReactElement;
171
- variant: ButtonProps['variant'];
172
- active: ButtonProps['active'];
171
+ variant: ButtonProps["variant"];
172
+ active: ButtonProps["active"];
173
173
  }) => react_jsx_runtime.JSX.Element;
174
174
 
175
175
  declare const IconButton: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<TouchableOpacity>>;
@@ -190,7 +190,7 @@ interface ExplorerProps {
190
190
  }
191
191
  declare const Explorer: FC<ExplorerProps>;
192
192
 
193
- declare const useCombination: (index: SidebarProps['index'], indexError: SidebarProps['indexError'], previewInitialized: SidebarProps['previewInitialized'], status: SidebarProps['status'], refs: SidebarProps['refs']) => CombinedDataset;
193
+ declare const useCombination: (index: SidebarProps["index"], indexError: SidebarProps["indexError"], previewInitialized: SidebarProps["previewInitialized"], status: SidebarProps["status"], refs: SidebarProps["refs"]) => CombinedDataset;
194
194
  interface SidebarProps extends API_LoadedRefData {
195
195
  refs: State['refs'];
196
196
  status: State['status'];
package/dist/index.js CHANGED
@@ -4494,53 +4494,6 @@ var import_react17 = require("react");
4494
4494
  var import_react_native8 = require("react-native");
4495
4495
  var import_react_native_safe_area_context3 = require("react-native-safe-area-context");
4496
4496
 
4497
- // src/icon/BottomBarToggleIcon.tsx
4498
- var import_react_native_svg10 = require("react-native-svg");
4499
- var import_jsx_runtime20 = require("react/jsx-runtime");
4500
- var BottomBarToggleIcon = ({
4501
- color = "currentColor",
4502
- width = 14,
4503
- height = 14,
4504
- ...props
4505
- }) => {
4506
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native_svg10.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
4507
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4508
- import_react_native_svg10.Path,
4509
- {
4510
- 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",
4511
- fill: color
4512
- }
4513
- ),
4514
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4515
- import_react_native_svg10.Path,
4516
- {
4517
- fillRule: "evenodd",
4518
- clipRule: "evenodd",
4519
- 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",
4520
- fill: color
4521
- }
4522
- )
4523
- ] });
4524
- };
4525
-
4526
- // src/icon/MenuIcon.tsx
4527
- var import_react_native_svg11 = require("react-native-svg");
4528
- var import_jsx_runtime21 = require("react/jsx-runtime");
4529
- var MenuIcon = ({
4530
- color = "currentColor",
4531
- width = 14,
4532
- height = 14,
4533
- ...props
4534
- }) => {
4535
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native_svg11.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
4536
- import_react_native_svg11.Path,
4537
- {
4538
- 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",
4539
- fill: color
4540
- }
4541
- ) });
4542
- };
4543
-
4544
4497
  // src/MobileAddonsPanel.tsx
4545
4498
  var import_bottom_sheet2 = require("@gorhom/bottom-sheet");
4546
4499
  var import_manager_api = require("@storybook/core/manager-api");
@@ -4552,7 +4505,7 @@ var import_react_native_gesture_handler = require("react-native-gesture-handler"
4552
4505
  var import_react_native_reanimated = __toESM(require("react-native-reanimated"));
4553
4506
  var import_react_native_safe_area_context = require("react-native-safe-area-context");
4554
4507
  var import_react_native_theming13 = require("@storybook/react-native-theming");
4555
- var import_jsx_runtime22 = require("react/jsx-runtime");
4508
+ var import_jsx_runtime20 = require("react/jsx-runtime");
4556
4509
  var MobileAddonsPanel = (0, import_react15.forwardRef)(({ storyId, onStateChange }, ref) => {
4557
4510
  const theme = (0, import_react_native_theming13.useTheme)();
4558
4511
  const reducedMotion = (0, import_react_native_reanimated.useReducedMotion)();
@@ -4577,7 +4530,7 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(({ storyId, onStateChange
4577
4530
  maxHeight: height - animatedPosition.value - insets.bottom
4578
4531
  };
4579
4532
  }, [animatedPosition.value, height, insets.bottom]);
4580
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4533
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4581
4534
  import_bottom_sheet2.BottomSheetModal,
4582
4535
  {
4583
4536
  ref: addonsPanelBottomSheetRef,
@@ -4603,7 +4556,7 @@ var MobileAddonsPanel = (0, import_react15.forwardRef)(({ storyId, onStateChange
4603
4556
  enableDismissOnClose: true,
4604
4557
  enableHandlePanningGesture: true,
4605
4558
  stackBehavior: "replace",
4606
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4559
+ children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native_reanimated.default.View, { style: [{ flex: 1 }, adjustedBottomSheetSize], children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4607
4560
  AddonsTabs,
4608
4561
  {
4609
4562
  onClose: () => {
@@ -4620,9 +4573,9 @@ var AddonsTabs = ({ onClose, storyId }) => {
4620
4573
  const panels = import_manager_api.addons.getElements(import_types3.Addon_TypesEnum.PANEL);
4621
4574
  const [addonSelected, setAddonSelected] = (0, import_react15.useState)(Object.keys(panels)[0]);
4622
4575
  const insets = (0, import_react_native_safe_area_context.useSafeAreaInsets)();
4623
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native6.View, { style: { flex: 1 }, children: [
4624
- /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native6.View, { style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" }, children: [
4625
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4576
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: { flex: 1 }, children: [
4577
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_native6.View, { style: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "lightgrey" }, children: [
4578
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4626
4579
  import_react_native_gesture_handler.ScrollView,
4627
4580
  {
4628
4581
  horizontal: true,
@@ -4632,7 +4585,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
4632
4585
  },
4633
4586
  children: Object.values(panels).map(({ id, title }) => {
4634
4587
  const resolvedTitle = typeof title === "function" ? title({}) : title;
4635
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4588
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4636
4589
  Tab,
4637
4590
  {
4638
4591
  active: id === addonSelected,
@@ -4644,7 +4597,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
4644
4597
  })
4645
4598
  }
4646
4599
  ),
4647
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4600
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4648
4601
  IconButton,
4649
4602
  {
4650
4603
  style: {
@@ -4659,7 +4612,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
4659
4612
  }
4660
4613
  )
4661
4614
  ] }),
4662
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4615
+ /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
4663
4616
  import_react_native_gesture_handler.ScrollView,
4664
4617
  {
4665
4618
  style: { flex: 1 },
@@ -4668,10 +4621,10 @@ var AddonsTabs = ({ onClose, storyId }) => {
4668
4621
  },
4669
4622
  children: (() => {
4670
4623
  if (!storyId) {
4671
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
4624
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No Story Selected" }) });
4672
4625
  }
4673
4626
  if (Object.keys(panels).length === 0) {
4674
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
4627
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.View, { style: { alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native6.Text, { children: "No addons loaded." }) });
4675
4628
  }
4676
4629
  return panels[addonSelected].render({ active: true });
4677
4630
  })()
@@ -4680,7 +4633,7 @@ var AddonsTabs = ({ onClose, storyId }) => {
4680
4633
  ] });
4681
4634
  };
4682
4635
  var Tab = ({ active, onPress, text }) => {
4683
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabText, { active, children: text }) });
4636
+ return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabButton, { active, onPress, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TabText, { active, children: text }) });
4684
4637
  };
4685
4638
  var TabButton = import_react_native_theming12.styled.TouchableOpacity(({ theme, active }) => ({
4686
4639
  borderBottomWidth: active ? 2 : 0,
@@ -4705,8 +4658,8 @@ var import_react_native7 = require("react-native");
4705
4658
  var import_react_native_reanimated2 = require("react-native-reanimated");
4706
4659
  var import_react_native_safe_area_context2 = require("react-native-safe-area-context");
4707
4660
  var import_react_native_theming14 = require("@storybook/react-native-theming");
4708
- var import_jsx_runtime23 = require("react/jsx-runtime");
4709
- var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4661
+ var import_jsx_runtime21 = require("react/jsx-runtime");
4662
+ var BottomSheetBackdropComponent = (backdropComponentProps) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
4710
4663
  import_bottom_sheet3.BottomSheetBackdrop,
4711
4664
  {
4712
4665
  ...backdropComponentProps,
@@ -4734,7 +4687,7 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
4734
4687
  }
4735
4688
  }
4736
4689
  }));
4737
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4690
+ return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
4738
4691
  import_bottom_sheet3.BottomSheetModal,
4739
4692
  {
4740
4693
  ref: menuBottomSheetRef,
@@ -4753,7 +4706,7 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
4753
4706
  backdropComponent: BottomSheetBackdropComponent,
4754
4707
  backgroundStyle: { backgroundColor: theme.background.content },
4755
4708
  handleIndicatorStyle: { backgroundColor: theme.textMutedColor },
4756
- children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4709
+ children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
4757
4710
  import_bottom_sheet3.BottomSheetScrollView,
4758
4711
  {
4759
4712
  keyboardShouldPersistTaps: "handled",
@@ -4768,8 +4721,187 @@ var MobileMenuDrawer = (0, import_react16.forwardRef)(
4768
4721
  }
4769
4722
  );
4770
4723
 
4771
- // src/Layout.tsx
4724
+ // src/icon/BottomBarToggleIcon.tsx
4725
+ var import_react_native_svg10 = require("react-native-svg");
4726
+ var import_jsx_runtime22 = require("react/jsx-runtime");
4727
+ var BottomBarToggleIcon = ({
4728
+ color = "currentColor",
4729
+ width = 14,
4730
+ height = 14,
4731
+ ...props
4732
+ }) => {
4733
+ return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native_svg10.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: [
4734
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4735
+ import_react_native_svg10.Path,
4736
+ {
4737
+ 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",
4738
+ fill: color
4739
+ }
4740
+ ),
4741
+ /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
4742
+ import_react_native_svg10.Path,
4743
+ {
4744
+ fillRule: "evenodd",
4745
+ clipRule: "evenodd",
4746
+ 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",
4747
+ fill: color
4748
+ }
4749
+ )
4750
+ ] });
4751
+ };
4752
+
4753
+ // src/icon/DarkLogo.tsx
4754
+ var import_react_native_svg11 = __toESM(require("react-native-svg"));
4755
+ var import_jsx_runtime23 = require("react/jsx-runtime");
4756
+ function DarkLogo({ width = 300, height = 60, ...props }) {
4757
+ return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4758
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.Defs, { children: [
4759
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4760
+ import_react_native_svg11.Path,
4761
+ {
4762
+ id: "a",
4763
+ 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"
4764
+ }
4765
+ ),
4766
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4767
+ import_react_native_svg11.Path,
4768
+ {
4769
+ id: "c",
4770
+ 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"
4771
+ }
4772
+ )
4773
+ ] }),
4774
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { fill: "none", fillRule: "evenodd", children: [
4775
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4776
+ import_react_native_svg11.Path,
4777
+ {
4778
+ fill: "#FFF",
4779
+ fillRule: "nonzero",
4780
+ 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"
4781
+ }
4782
+ ),
4783
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4784
+ import_react_native_svg11.Path,
4785
+ {
4786
+ 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",
4787
+ fill: "#FF4785",
4788
+ fillRule: "nonzero"
4789
+ }
4790
+ ),
4791
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
4792
+ /* @__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" }) }),
4793
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4794
+ import_react_native_svg11.Path,
4795
+ {
4796
+ fill: "#FFF",
4797
+ fillRule: "nonzero",
4798
+ d: "M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z",
4799
+ mask: "url(#b)"
4800
+ }
4801
+ )
4802
+ ] }),
4803
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native_svg11.G, { transform: "translate(1)", children: [
4804
+ /* @__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" }) }),
4805
+ /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
4806
+ import_react_native_svg11.Path,
4807
+ {
4808
+ fill: "#FFF",
4809
+ fillRule: "nonzero",
4810
+ d: "M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z",
4811
+ mask: "url(#d)"
4812
+ }
4813
+ )
4814
+ ] })
4815
+ ] })
4816
+ ] });
4817
+ }
4818
+
4819
+ // src/icon/Logo.tsx
4820
+ var import_react_native_svg12 = __toESM(require("react-native-svg"));
4772
4821
  var import_jsx_runtime24 = require("react/jsx-runtime");
4822
+ function Logo({ width = 300, height = 60, ...props }) {
4823
+ return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.default, { width, height, viewBox: "0 0 300 60", ...props, children: [
4824
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.Defs, { children: [
4825
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4826
+ import_react_native_svg12.Path,
4827
+ {
4828
+ id: "a",
4829
+ 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"
4830
+ }
4831
+ ),
4832
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4833
+ import_react_native_svg12.Path,
4834
+ {
4835
+ id: "c",
4836
+ 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"
4837
+ }
4838
+ )
4839
+ ] }),
4840
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { fill: "none", fillRule: "evenodd", children: [
4841
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4842
+ import_react_native_svg12.Path,
4843
+ {
4844
+ fill: "#333",
4845
+ fillRule: "nonzero",
4846
+ 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"
4847
+ }
4848
+ ),
4849
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4850
+ import_react_native_svg12.Path,
4851
+ {
4852
+ 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",
4853
+ fill: "#FF4785",
4854
+ fillRule: "nonzero"
4855
+ }
4856
+ ),
4857
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
4858
+ /* @__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" }) }),
4859
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4860
+ import_react_native_svg12.Path,
4861
+ {
4862
+ fill: "#FFF",
4863
+ fillRule: "nonzero",
4864
+ d: "M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z",
4865
+ mask: "url(#b)"
4866
+ }
4867
+ )
4868
+ ] }),
4869
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native_svg12.G, { transform: "translate(1)", children: [
4870
+ /* @__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" }) }),
4871
+ /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4872
+ import_react_native_svg12.Path,
4873
+ {
4874
+ fill: "#FFF",
4875
+ fillRule: "nonzero",
4876
+ d: "M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z",
4877
+ mask: "url(#d)"
4878
+ }
4879
+ )
4880
+ ] })
4881
+ ] })
4882
+ ] });
4883
+ }
4884
+
4885
+ // src/icon/MenuIcon.tsx
4886
+ var import_react_native_svg13 = require("react-native-svg");
4887
+ var import_jsx_runtime25 = require("react/jsx-runtime");
4888
+ var MenuIcon = ({
4889
+ color = "currentColor",
4890
+ width = 14,
4891
+ height = 14,
4892
+ ...props
4893
+ }) => {
4894
+ return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native_svg13.Svg, { width, height, viewBox: "0 0 14 14", fill: "none", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
4895
+ import_react_native_svg13.Path,
4896
+ {
4897
+ 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",
4898
+ fill: color
4899
+ }
4900
+ ) });
4901
+ };
4902
+
4903
+ // src/Layout.tsx
4904
+ var import_jsx_runtime26 = require("react/jsx-runtime");
4773
4905
  var Layout = ({
4774
4906
  storyHash,
4775
4907
  story,
@@ -4785,7 +4917,7 @@ var Layout = ({
4785
4917
  const [desktopSidebarOpen, setDesktopSidebarOpen] = (0, import_react17.useState)(true);
4786
4918
  const [desktopAddonsPanelOpen, setDesktopAddonsPanelOpen] = (0, import_react17.useState)(true);
4787
4919
  if (isDesktop) {
4788
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4920
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4789
4921
  import_react_native8.View,
4790
4922
  {
4791
4923
  style: {
@@ -4795,7 +4927,7 @@ var Layout = ({
4795
4927
  flexDirection: "row"
4796
4928
  },
4797
4929
  children: [
4798
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4930
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4799
4931
  import_react_native8.View,
4800
4932
  {
4801
4933
  style: {
@@ -4804,7 +4936,7 @@ var Layout = ({
4804
4936
  borderColor: theme.appBorderColor,
4805
4937
  borderRightWidth: 1
4806
4938
  },
4807
- children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4939
+ children: desktopSidebarOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4808
4940
  import_react_native8.ScrollView,
4809
4941
  {
4810
4942
  keyboardShouldPersistTaps: "handled",
@@ -4812,24 +4944,25 @@ var Layout = ({
4812
4944
  paddingBottom: insets.bottom
4813
4945
  },
4814
4946
  children: [
4815
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
4947
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4816
4948
  import_react_native8.View,
4817
4949
  {
4818
4950
  style: {
4819
4951
  flexDirection: "row",
4820
4952
  alignItems: "center",
4821
- paddingVertical: 10,
4953
+ paddingTop: 10,
4822
4954
  paddingLeft: 16,
4955
+ paddingBottom: 4,
4823
4956
  paddingRight: 10,
4824
4957
  justifyContent: "space-between"
4825
4958
  },
4826
4959
  children: [
4827
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.Text, { style: { fontSize: 20, fontWeight: "bold", color: theme.color.defaultText }, children: "Storybook" }),
4828
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
4960
+ theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }),
4961
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(false), Icon: MenuIcon })
4829
4962
  ]
4830
4963
  }
4831
4964
  ),
4832
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4965
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4833
4966
  Sidebar,
4834
4967
  {
4835
4968
  extra: [],
@@ -4848,12 +4981,12 @@ var Layout = ({
4848
4981
  )
4849
4982
  ]
4850
4983
  }
4851
- ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
4984
+ ) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(IconButton, { onPress: () => setDesktopSidebarOpen(true), Icon: MenuIcon })
4852
4985
  }
4853
4986
  ),
4854
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
4855
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
4856
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4987
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1 }, children: [
4988
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
4989
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4857
4990
  import_react_native8.View,
4858
4991
  {
4859
4992
  style: {
@@ -4863,7 +4996,7 @@ var Layout = ({
4863
4996
  paddingTop: desktopAddonsPanelOpen ? 4 : 0,
4864
4997
  padding: desktopAddonsPanelOpen ? 0 : 10
4865
4998
  },
4866
- children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4999
+ children: desktopAddonsPanelOpen ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(AddonsTabs, { storyId: story?.id, onClose: () => setDesktopAddonsPanelOpen(false) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4867
5000
  IconButton,
4868
5001
  {
4869
5002
  style: { marginLeft: "auto" },
@@ -4878,28 +5011,31 @@ var Layout = ({
4878
5011
  }
4879
5012
  );
4880
5013
  }
4881
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
4882
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
4883
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onStateChange: setDrawerOpen, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
4884
- Sidebar,
4885
- {
4886
- extra: [],
4887
- previewInitialized: true,
4888
- indexError: void 0,
4889
- refs: {},
4890
- setSelection: ({ storyId: newStoryId }) => {
4891
- const channel = import_manager_api2.addons.getChannel();
4892
- channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
4893
- },
4894
- status: {},
4895
- index: storyHash,
4896
- storyId: story?.id,
4897
- refId: DEFAULT_REF_ID
4898
- }
4899
- ) }),
4900
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, onStateChange: setMenuOpen }),
4901
- (import_react_native8.Platform.OS !== "android" || !menuOpen && !drawerOpen) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(Nav, { children: [
4902
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
5014
+ return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.View, { style: { flex: 1, paddingTop: insets.top, backgroundColor: theme.background.content }, children: [
5015
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { flex: 1 }, children }),
5016
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(MobileMenuDrawer, { ref: mobileMenuDrawerRef, onStateChange: setDrawerOpen, children: [
5017
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_native8.View, { style: { paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }, children: theme.base === "light" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Logo, { height: 25, width: 125 }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DarkLogo, { height: 25, width: 125 }) }),
5018
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
5019
+ Sidebar,
5020
+ {
5021
+ extra: [],
5022
+ previewInitialized: true,
5023
+ indexError: void 0,
5024
+ refs: {},
5025
+ setSelection: ({ storyId: newStoryId }) => {
5026
+ const channel = import_manager_api2.addons.getChannel();
5027
+ channel.emit(import_core_events.SET_CURRENT_STORY, { storyId: newStoryId });
5028
+ },
5029
+ status: {},
5030
+ index: storyHash,
5031
+ storyId: story?.id,
5032
+ refId: DEFAULT_REF_ID
5033
+ }
5034
+ )
5035
+ ] }),
5036
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MobileAddonsPanel, { ref: addonPanelRef, storyId: story?.id, onStateChange: setMenuOpen }),
5037
+ (import_react_native8.Platform.OS !== "android" || !menuOpen && !drawerOpen) && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Container3, { style: { marginBottom: insets.bottom }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Nav, { children: [
5038
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
4903
5039
  Button2,
4904
5040
  {
4905
5041
  style: { flexShrink: 1 },
@@ -4908,8 +5044,8 @@ var Layout = ({
4908
5044
  mobileMenuDrawerRef.current.setMobileMenuOpen(true);
4909
5045
  },
4910
5046
  children: [
4911
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MenuIcon, { color: theme.color.mediumdark }),
4912
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native8.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
5047
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuIcon, { color: theme.color.mediumdark }),
5048
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native8.Text, { style: { flexShrink: 1, color: theme.color.defaultText }, numberOfLines: 1, children: [
4913
5049
  story?.title,
4914
5050
  "/",
4915
5051
  story?.name
@@ -4917,7 +5053,7 @@ var Layout = ({
4917
5053
  ]
4918
5054
  }
4919
5055
  ),
4920
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
5056
+ /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
4921
5057
  IconButton,
4922
5058
  {
4923
5059
  onPress: () => addonPanelRef.current.setAddonsPanelOpen(true),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@storybook/react-native-ui",
3
- "version": "8.3.1-beta.1",
3
+ "version": "8.3.1-beta.3",
4
4
  "description": "ui components for react native storybook",
5
5
  "keywords": [
6
6
  "react",
@@ -54,12 +54,12 @@
54
54
  "jest": "29.7.0",
55
55
  "react-test-renderer": "18.2.0",
56
56
  "tsup": "^7.2.0",
57
- "typescript": "~5.3.3"
57
+ "typescript": "^5.3.3"
58
58
  },
59
59
  "dependencies": {
60
60
  "@storybook/core": "^8.3.1",
61
61
  "@storybook/react": "^8.3.1",
62
- "@storybook/react-native-theming": "^8.3.1-beta.1",
62
+ "@storybook/react-native-theming": "^8.3.1-beta.3",
63
63
  "fuse.js": "^7.0.0",
64
64
  "memoizerific": "^1.11.3",
65
65
  "polished": "^4.3.1",
@@ -80,5 +80,5 @@
80
80
  "publishConfig": {
81
81
  "access": "public"
82
82
  },
83
- "gitHead": "ec1fdf03a6769c4f476066d3fb7f7086cbf0cc4e"
83
+ "gitHead": "1b2c4446155e3ee8f21f237da93f81b445419158"
84
84
  }
package/src/Layout.tsx CHANGED
@@ -1,21 +1,22 @@
1
1
  import { SET_CURRENT_STORY } from '@storybook/core/core-events';
2
2
  import { addons } from '@storybook/core/manager-api';
3
3
  import { type API_IndexHash, type Args, type StoryContext } from '@storybook/core/types';
4
+ import type { ReactRenderer } from '@storybook/react';
4
5
  import { styled, useTheme } from '@storybook/react-native-theming';
5
6
  import { ReactNode, useRef, useState } from 'react';
6
7
  import { Platform, ScrollView, Text, View } from 'react-native';
7
8
  import { useSafeAreaInsets } from 'react-native-safe-area-context';
8
9
  import { IconButton } from './IconButton';
10
+ import { useLayout } from './LayoutProvider';
11
+ import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
12
+ import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
9
13
  import { Sidebar } from './Sidebar';
10
14
  import { DEFAULT_REF_ID } from './constants';
11
15
  import { BottomBarToggleIcon } from './icon/BottomBarToggleIcon';
16
+ import { DarkLogo } from './icon/DarkLogo';
17
+ import { Logo } from './icon/Logo';
12
18
  import { MenuIcon } from './icon/MenuIcon';
13
19
 
14
- import type { ReactRenderer } from '@storybook/react';
15
- import { useLayout } from './LayoutProvider';
16
- import { AddonsTabs, MobileAddonsPanel, MobileAddonsPanelRef } from './MobileAddonsPanel';
17
- import { MobileMenuDrawer, MobileMenuDrawerRef } from './MobileMenuDrawer';
18
-
19
20
  export const Layout = ({
20
21
  storyHash,
21
22
  story,
@@ -66,15 +67,18 @@ export const Layout = ({
66
67
  style={{
67
68
  flexDirection: 'row',
68
69
  alignItems: 'center',
69
- paddingVertical: 10,
70
+ paddingTop: 10,
70
71
  paddingLeft: 16,
72
+ paddingBottom: 4,
71
73
  paddingRight: 10,
72
74
  justifyContent: 'space-between',
73
75
  }}
74
76
  >
75
- <Text style={{ fontSize: 20, fontWeight: 'bold', color: theme.color.defaultText }}>
76
- Storybook
77
- </Text>
77
+ {theme.base === 'light' ? (
78
+ <Logo height={25} width={125} />
79
+ ) : (
80
+ <DarkLogo height={25} width={125} />
81
+ )}
78
82
 
79
83
  <IconButton onPress={() => setDesktopSidebarOpen(false)} Icon={MenuIcon} />
80
84
  </View>
@@ -132,6 +136,13 @@ export const Layout = ({
132
136
  <View style={{ flex: 1 }}>{children}</View>
133
137
 
134
138
  <MobileMenuDrawer ref={mobileMenuDrawerRef} onStateChange={setDrawerOpen}>
139
+ <View style={{ paddingLeft: 16, paddingTop: 4, paddingBottom: 4 }}>
140
+ {theme.base === 'light' ? (
141
+ <Logo height={25} width={125} />
142
+ ) : (
143
+ <DarkLogo height={25} width={125} />
144
+ )}
145
+ </View>
135
146
  <Sidebar
136
147
  extra={[]}
137
148
  previewInitialized
@@ -0,0 +1,52 @@
1
+ import Svg, { Defs, G, Mask, Path, SvgProps, Use } from 'react-native-svg';
2
+
3
+ export function DarkLogo({ width = 300, height = 60, ...props }: SvgProps) {
4
+ return (
5
+ <Svg width={width} height={height} viewBox="0 0 300 60" {...props}>
6
+ <Defs>
7
+ <Path
8
+ id="a"
9
+ 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"
10
+ />
11
+ <Path
12
+ id="c"
13
+ 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"
14
+ />
15
+ </Defs>
16
+ <G fill="none" fillRule="evenodd">
17
+ <Path
18
+ fill="#FFF"
19
+ fillRule="nonzero"
20
+ 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"
21
+ />
22
+ <Path
23
+ 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"
24
+ fill="#FF4785"
25
+ fillRule="nonzero"
26
+ />
27
+ <G transform="translate(1)">
28
+ <Mask id="b" fill="#fff">
29
+ <Use xlinkHref="#a" />
30
+ </Mask>
31
+ <Path
32
+ fill="#FFF"
33
+ fillRule="nonzero"
34
+ d="M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z"
35
+ mask="url(#b)"
36
+ />
37
+ </G>
38
+ <G transform="translate(1)">
39
+ <Mask id="d" fill="#fff">
40
+ <Use xlinkHref="#c" />
41
+ </Mask>
42
+ <Path
43
+ fill="#FFF"
44
+ fillRule="nonzero"
45
+ d="M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z"
46
+ mask="url(#d)"
47
+ />
48
+ </G>
49
+ </G>
50
+ </Svg>
51
+ );
52
+ }
@@ -0,0 +1,52 @@
1
+ import Svg, { Defs, G, Mask, Path, SvgProps, Use } from 'react-native-svg';
2
+
3
+ export function Logo({ width = 300, height = 60, ...props }: SvgProps) {
4
+ return (
5
+ <Svg width={width} height={height} viewBox="0 0 300 60" {...props}>
6
+ <Defs>
7
+ <Path
8
+ id="a"
9
+ 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"
10
+ />
11
+ <Path
12
+ id="c"
13
+ 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"
14
+ />
15
+ </Defs>
16
+ <G fill="none" fillRule="evenodd">
17
+ <Path
18
+ fill="#333"
19
+ fillRule="nonzero"
20
+ 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"
21
+ />
22
+ <Path
23
+ 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"
24
+ fill="#FF4785"
25
+ fillRule="nonzero"
26
+ />
27
+ <G transform="translate(1)">
28
+ <Mask id="b" fill="#fff">
29
+ <Use xlinkHref="#a" />
30
+ </Mask>
31
+ <Path
32
+ fill="#FFF"
33
+ fillRule="nonzero"
34
+ d="M35.324 7.326L35.61.569l5.746-.36.248 6.88a.447.447 0 01-.723.367L38.664 5.71 36.041 7.7a.447.447 0 01-.717-.374z"
35
+ mask="url(#b)"
36
+ />
37
+ </G>
38
+ <G transform="translate(1)">
39
+ <Mask id="d" fill="#fff">
40
+ <Use xlinkHref="#c" />
41
+ </Mask>
42
+ <Path
43
+ fill="#FFF"
44
+ fillRule="nonzero"
45
+ d="M27.975 22.464c0 1.166 7.853.607 8.907-.212 0-7.939-4.26-12.11-12.06-12.11-7.801 0-12.172 4.236-12.172 10.591 0 11.069 14.938 11.28 14.938 17.318 0 1.695-.83 2.7-2.656 2.7-2.379 0-3.32-1.214-3.209-5.345 0-.896-9.073-1.175-9.35 0-.704 10.01 5.533 12.898 12.67 12.898 6.915 0 12.337-3.686 12.337-10.36 0-11.862-15.159-11.544-15.159-17.423 0-2.383 1.77-2.7 2.822-2.7 1.106 0 3.098.194 2.932 4.643z"
46
+ mask="url(#d)"
47
+ />
48
+ </G>
49
+ </G>
50
+ </Svg>
51
+ );
52
+ }