@k8o/arte-odyssey 8.0.3 → 9.1.0

package/dist/components/icons/qiita.mjs

@@ -8,14 +8,14 @@ const Qiita = ({ className }) => /* @__PURE__ */ jsxs("svg", {
 	viewBox: "0 0 300 300",
 	xmlns: "http://www.w3.org/2000/svg",
 	children: [/* @__PURE__ */ jsx("path", {
-		d: "\nM170.000000,301.000000 \n	C155.979111,301.000000 141.958206,301.000000 127.345764,300.629639 \n	C126.239006,299.869110 125.762238,299.207245 125.203033,299.128113 \n	C106.989998,296.551727 90.219421,289.994354 74.408813,280.788544 \n	C57.083073,270.700592 42.210533,257.637878 30.401751,241.568222 \n	C17.259384,223.683792 7.533754,204.007355 3.831533,181.762802 \n	C3.441022,179.416443 1.969823,177.249939 0.999998,175.000000 \n	C1.000000,159.312439 1.000000,143.624878 1.370366,127.345764 \n	C2.158406,125.906921 2.752678,125.101463 2.964882,124.205513 \n	C4.269327,118.697952 5.149469,113.067192 6.791410,107.666100 \n	C14.922722,80.918518 29.169430,58.105297 50.064369,39.282753 \n	C66.691437,24.304787 85.516151,13.547151 106.805115,7.032844 \n	C114.437439,4.697392 122.262764,2.992616 130.000000,0.999999 \n	C144.354233,1.000000 158.708450,1.000000 173.671295,1.361813 \n	C175.169434,2.129513 176.023727,2.661134 176.953934,2.921903 \n	C186.592621,5.623932 196.436935,7.734229 205.854401,11.056800 \n	C232.833069,20.575109 254.469681,37.783997 271.493408,60.348236 \n	C284.871704,78.080574 294.486145,97.924057 298.162964,120.224716 \n	C298.550507,122.575172 300.028107,124.745895 301.000000,127.000000 \n	C301.000000,127.000000 301.000000,127.500000 300.671753,127.849342 \n	C300.562347,129.132462 300.781158,130.066238 301.000000,131.000000 \n	C301.000000,145.354233 301.000000,159.708450 300.629639,174.654236 \n	C299.171234,179.593353 298.115143,183.949219 296.989014,188.286880 \n	C293.931519,200.063629 289.705322,211.372101 283.829315,222.004288 \n	C274.894348,218.557892 269.438446,218.192047 260.010956,219.870041 \n	C258.349915,220.165695 256.086395,220.077896 254.829315,219.164688 \n	C245.126648,212.116272 238.846954,205.039108 243.475754,192.582794 \n	C246.148499,185.390274 247.366974,177.402039 247.771225,169.694901 \n	C248.162460,162.236069 246.965790,154.638504 245.950226,147.172104 \n	C243.286118,127.585983 235.478455,110.158607 223.218216,94.679520 \n	C221.024734,91.910141 217.973633,89.201195 217.250397,86.024498 \n	C216.023682,80.636421 216.256302,74.901382 216.028015,69.305954 \n	C215.878708,65.646271 216.192627,61.963074 215.956909,58.312504 \n	C215.467712,50.736240 210.890488,48.355881 204.493225,52.185108 \n	C199.484238,55.183346 194.132187,57.742550 189.570175,61.311783 \n	C185.799606,64.261810 182.755142,63.557652 178.911240,62.052422 \n	C163.352173,55.959682 147.249557,55.541851 131.037292,58.512772 \n	C117.563240,60.981918 105.902451,67.683006 94.499496,74.962189 \n	C92.475288,76.254356 89.336090,76.721367 86.927635,76.308891 \n	C80.881927,75.273514 74.984543,73.403992 68.980583,72.083038 \n	C63.874626,70.959656 60.615265,74.591972 61.897961,79.728706 \n	C62.917603,83.812019 63.679840,87.980576 65.003036,91.962868 \n	C68.001892,100.988197 67.465935,108.978676 62.427811,117.706459 \n	C56.071018,128.718628 53.742241,141.571228 53.231621,154.218140 \n	C52.788898,165.183334 53.418179,176.383179 55.232830,187.201004 \n	C57.648373,201.600983 63.625504,214.933578 73.514030,225.895630 \n	C90.289635,244.492462 112.103630,252.717087 136.564270,253.806870 \n	C147.362289,254.287949 158.273514,252.894623 169.097687,251.945709 \n	C181.313354,250.874802 193.160629,247.931686 203.901901,241.907135 \n	C211.074463,237.884247 217.715607,232.913864 223.483047,229.102097 \n	C228.864258,234.439667 233.766571,240.463348 239.805130,244.961761 \n	C245.717926,249.366486 252.788116,252.217545 259.766663,255.974686 \n	C254.959473,260.094696 249.638489,264.894928 244.066971,269.384247 \n	C228.576508,281.865814 211.133575,290.646606 191.990906,295.945251 \n	C184.749069,297.949768 177.335373,299.333374 170.000000,301.000000 \nz",
+		d: "\nM170.00,301.00 \n	C155.98,301.00 141.96,301.00 127.35,300.63 \n	C126.24,299.87 125.76,299.21 125.20,299.13 \n	C106.99,296.55 90.22,289.99 74.41,280.79 \n	C57.08,270.70 42.21,257.64 30.40,241.57 \n	C17.26,223.68 7.53,204.01 3.83,181.76 \n	C3.44,179.42 1.97,177.25 1.00,175.00 \n	C1.00,159.31 1.00,143.62 1.37,127.35 \n	C2.16,125.91 2.75,125.10 2.96,124.21 \n	C4.27,118.70 5.15,113.07 6.79,107.67 \n	C14.92,80.92 29.17,58.11 50.06,39.28 \n	C66.69,24.30 85.52,13.55 106.81,7.03 \n	C114.44,4.70 122.26,2.99 130.00,1.00 \n	C144.35,1.00 158.71,1.00 173.67,1.36 \n	C175.17,2.13 176.02,2.66 176.95,2.92 \n	C186.59,5.62 196.44,7.73 205.85,11.06 \n	C232.83,20.58 254.47,37.78 271.49,60.35 \n	C284.87,78.08 294.49,97.92 298.16,120.22 \n	C298.55,122.58 300.03,124.75 301.00,127.00 \n	C301.00,127.00 301.00,127.50 300.67,127.85 \n	C300.56,129.13 300.78,130.07 301.00,131.00 \n	C301.00,145.35 301.00,159.71 300.63,174.65 \n	C299.17,179.59 298.12,183.95 296.99,188.29 \n	C293.93,200.06 289.71,211.37 283.83,222.00 \n	C274.89,218.56 269.44,218.19 260.01,219.87 \n	C258.35,220.17 256.09,220.08 254.83,219.16 \n	C245.13,212.12 238.85,205.04 243.48,192.58 \n	C246.15,185.39 247.37,177.40 247.77,169.69 \n	C248.16,162.24 246.97,154.64 245.95,147.17 \n	C243.29,127.59 235.48,110.16 223.22,94.68 \n	C221.02,91.91 217.97,89.20 217.25,86.02 \n	C216.02,80.64 216.26,74.90 216.03,69.31 \n	C215.88,65.65 216.19,61.96 215.96,58.31 \n	C215.47,50.74 210.89,48.36 204.49,52.19 \n	C199.48,55.18 194.13,57.74 189.57,61.31 \n	C185.80,64.26 182.76,63.56 178.91,62.05 \n	C163.35,55.96 147.25,55.54 131.04,58.51 \n	C117.56,60.98 105.90,67.68 94.50,74.96 \n	C92.48,76.25 89.34,76.72 86.93,76.31 \n	C80.88,75.27 74.98,73.40 68.98,72.08 \n	C63.87,70.96 60.62,74.59 61.90,79.73 \n	C62.92,83.81 63.68,87.98 65.00,91.96 \n	C68.00,100.99 67.47,108.98 62.43,117.71 \n	C56.07,128.72 53.74,141.57 53.23,154.22 \n	C52.79,165.18 53.42,176.38 55.23,187.20 \n	C57.65,201.60 63.63,214.93 73.51,225.90 \n	C90.29,244.49 112.10,252.72 136.56,253.81 \n	C147.36,254.29 158.27,252.89 169.10,251.95 \n	C181.31,250.87 193.16,247.93 203.90,241.91 \n	C211.07,237.88 217.72,232.91 223.48,229.10 \n	C228.86,234.44 233.77,240.46 239.81,244.96 \n	C245.72,249.37 252.79,252.22 259.77,255.97 \n	C254.96,260.09 249.64,264.89 244.07,269.38 \n	C228.58,281.87 211.13,290.65 191.99,295.95 \n	C184.75,297.95 177.34,299.33 170.00,301.00 \nz",
 		fill: "#55C500",
-		opacity: "1.000000",
+		opacity: "1.00",
 		stroke: "none"
 	}), /* @__PURE__ */ jsx("path", {
-		d: "\nM201.225189,166.276794 \n	C189.031174,176.100708 175.086823,180.471069 160.137070,181.956238 \n	C150.819595,182.881897 141.426971,184.137253 132.118484,183.810059 \n	C118.485313,183.330841 105.088982,180.780624 94.964722,170.370422 \n	C86.975929,162.155975 83.842285,151.873108 83.871910,140.384537 \n	C79.755951,142.146729 75.807930,143.837021 71.859909,145.527313 \n	C71.426521,145.030685 70.993141,144.534042 70.559761,144.037399 \n	C71.605118,142.712494 72.390259,140.915161 73.752190,140.165009 \n	C76.273209,138.776428 79.261017,138.239395 81.794548,136.867722 \n	C83.040543,136.193130 83.705650,134.445633 85.179832,132.440857 \n	C79.511604,132.440857 75.184845,132.440857 70.376671,132.440857 \n	C70.295670,131.767517 70.156448,130.610168 70.024399,129.512482 \n	C75.184860,127.892395 81.266022,130.216797 85.992661,124.268692 \n	C81.129585,123.773880 77.317062,123.373009 73.501640,123.002037 \n	C70.696785,122.729332 68.221008,122.199181 69.412491,117.908295 \n	C73.094612,118.514526 76.738632,119.062492 80.361443,119.726273 \n	C83.667381,120.331993 85.657936,120.257996 87.215927,116.056198 \n	C96.187126,91.861618 113.308662,77.035995 139.129654,73.009537 \n	C162.044128,69.436325 181.371948,76.328560 196.897110,93.513306 \n	C199.927505,96.867638 202.454681,100.743088 204.789322,104.633041 \n	C206.068741,106.764793 206.941666,107.317734 209.399292,106.376808 \n	C212.693344,105.115639 216.239105,104.439819 219.729736,103.802704 \n	C220.976517,103.575134 222.377533,104.192612 223.708160,104.424370 \n	C223.711136,104.857109 223.714096,105.289856 223.717056,105.722595 \n	C218.539001,107.575287 213.360947,109.427979 207.998383,111.346695 \n	C212.074692,119.524742 219.169907,110.879448 224.173523,115.106606 \n	C221.408920,120.754829 214.594101,115.808136 211.178375,119.902344 \n	C211.357635,123.787003 214.459824,123.975601 217.679230,124.365570 \n	C220.484360,124.705360 223.230530,125.531921 226.134338,126.172417 \n	C224.529892,129.574585 224.529892,129.574585 212.763885,127.405243 \n	C214.084839,141.788361 212.905441,155.465408 201.225189,166.276794 \nz",
+		d: "\nM201.23,166.28 \n	C189.03,176.10 175.09,180.47 160.14,181.96 \n	C150.82,182.88 141.43,184.14 132.12,183.81 \n	C118.49,183.33 105.09,180.78 94.96,170.37 \n	C86.98,162.16 83.84,151.87 83.87,140.38 \n	C79.76,142.15 75.81,143.84 71.86,145.53 \n	C71.43,145.03 70.99,144.53 70.56,144.04 \n	C71.61,142.71 72.39,140.92 73.75,140.17 \n	C76.27,138.78 79.26,138.24 81.79,136.87 \n	C83.04,136.19 83.71,134.45 85.18,132.44 \n	C79.51,132.44 75.18,132.44 70.38,132.44 \n	C70.30,131.77 70.16,130.61 70.02,129.51 \n	C75.18,127.89 81.27,130.22 85.99,124.27 \n	C81.13,123.77 77.32,123.37 73.50,123.00 \n	C70.70,122.73 68.22,122.20 69.41,117.91 \n	C73.09,118.51 76.74,119.06 80.36,119.73 \n	C83.67,120.33 85.66,120.26 87.22,116.06 \n	C96.19,91.86 113.31,77.04 139.13,73.01 \n	C162.04,69.44 181.37,76.33 196.90,93.51 \n	C199.93,96.87 202.45,100.74 204.79,104.63 \n	C206.07,106.76 206.94,107.32 209.40,106.38 \n	C212.69,105.12 216.24,104.44 219.73,103.80 \n	C220.98,103.58 222.38,104.19 223.71,104.42 \n	C223.71,104.86 223.71,105.29 223.72,105.72 \n	C218.54,107.58 213.36,109.43 208.00,111.35 \n	C212.07,119.52 219.17,110.88 224.17,115.11 \n	C221.41,120.75 214.59,115.81 211.18,119.90 \n	C211.36,123.79 214.46,123.98 217.68,124.37 \n	C220.48,124.71 223.23,125.53 226.13,126.17 \n	C224.53,129.57 224.53,129.57 212.76,127.41 \n	C214.08,141.79 212.91,155.47 201.23,166.28 \nz",
 		fill: "#55C500",
-		opacity: "1.000000",
+		opacity: "1.00",
 		stroke: "none"
 	})]
 });

package/dist/components/icons/twitter.mjs

@@ -8,7 +8,7 @@ const Twitter = ({ className }) => /* @__PURE__ */ jsx("svg", {
 	xmlns: "http://www.w3.org/2000/svg",
 	children: /* @__PURE__ */ jsx("path", {
 		className: "fill-fg-base",
-		d: "M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z"
+		d: "M714.16 519.28L1160.89 0H1055.03L667.14 450.89L357.33 0H0L468.49 681.82L0 1226.37H105.87L515.49 750.22L842.67 1226.37H1200L714.14 519.28H714.16ZM569.16 687.83L521.70 619.93L144.01 79.69H306.62L611.41 515.68L658.88 583.58L1055.08 1150.3H892.48L569.16 687.85V687.83Z"
 	})
 });
 const TwitterIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {

package/dist/components/icons/vertical-writing.d.mts

@@ -0,0 +1,7 @@
+import { BaseIconProps } from "./base.mjs";
+import { FC } from "react";
+
+//#region src/components/icons/vertical-writing.d.ts
+declare const VerticalWritingIcon: FC<Partial<BaseIconProps>>;
+//#endregion
+export { VerticalWritingIcon };

package/dist/components/icons/vertical-writing.mjs

@@ -0,0 +1,25 @@
+import { BaseIcon } from "./base.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/icons/vertical-writing.tsx
+const VerticalWriting = ({ className }) => /* @__PURE__ */ jsxs("svg", {
+	className,
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "2",
+	viewBox: "0 0 24 24",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ jsx("path", { d: "M12 7v14" }),
+		/* @__PURE__ */ jsx("path", { d: "M17 8v4" }),
+		/* @__PURE__ */ jsx("path", { d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z" }),
+		/* @__PURE__ */ jsx("path", { d: "M7 8v4" })
+	]
+});
+const VerticalWritingIcon = ({ size = "md" }) => /* @__PURE__ */ jsx(BaseIcon, {
+	renderItem: (props) => /* @__PURE__ */ jsx(VerticalWriting, { ...props }),
+	size
+});
+//#endregion
+export { VerticalWritingIcon };

package/dist/components/index.d.mts

@@ -35,9 +35,10 @@ import { Textarea } from "./form/textarea/textarea.mjs";
 import { ArteOdyssey } from "./icons/arte-odyssey.mjs";
 import { GitHubIcon } from "./icons/github-mark.mjs";
 import { Logo, LogoIcon } from "./icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./icons/lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./icons/lucide.mjs";
 import { QiitaIcon } from "./icons/qiita.mjs";
 import { TwitterIcon } from "./icons/twitter.mjs";
+import { VerticalWritingIcon } from "./icons/vertical-writing.mjs";
 import { ScrollLinked } from "./layout/scroll-linked/scroll-linked.mjs";
 import { Separator } from "./layout/separator/separator.mjs";
 import { Anchor } from "./navigation/anchor/anchor.mjs";
@@ -53,4 +54,4 @@ import { useOpenContext } from "./overlays/popover/hooks.mjs";
 import { Popover } from "./overlays/popover/popover.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
 import { PortalRootProvider, usePortalRoot } from "./providers/portal-root.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/index.mjs

@@ -4,9 +4,10 @@ import { useToast } from "./feedback/toast/context.mjs";
 import { ArteOdyssey } from "./icons/arte-odyssey.mjs";
 import { GitHubIcon } from "./icons/github-mark.mjs";
 import { Logo, LogoIcon } from "./icons/logo.mjs";
-import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./icons/lucide.mjs";
+import { AIIcon, AccessibilityIcon, AlertIcon, AtomIcon, BadIcon, BlogIcon, BoringIcon, CheckIcon, ChevronIcon, CloseIcon, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, DifficultIcon, EasyIcon, ExternalLinkIcon, FormIcon, GoodIcon, HistoryIcon, HorizontalWritingIcon, InformativeIcon, InterestingIcon, LightModeIcon, LinkIcon, ListIcon, LocationIcon, MailIcon, MinusIcon, MixedColorIcon, NavigationMenuIcon, NewsIcon, PaletteIcon, PlusIcon, PrepareIcon, PublishDateIcon, RSSIcon, SendIcon, ShallowIcon, ShieldCheckIcon, SlideIcon, SparklesIcon, SubscribeIcon, TableIcon, TagIcon, UpdateDateIcon, ViewIcon, ViewOffIcon } from "./icons/lucide.mjs";
 import { QiitaIcon } from "./icons/qiita.mjs";
 import { TwitterIcon } from "./icons/twitter.mjs";
+import { VerticalWritingIcon } from "./icons/vertical-writing.mjs";
 import { Alert } from "./feedback/alert/alert.mjs";
 import { ToastProvider } from "./feedback/toast/provider.mjs";
 import { ArteOdysseyProvider } from "./providers/arte-odyssey-provider.mjs";
@@ -53,4 +54,4 @@ import { Modal } from "./overlays/modal/modal.mjs";
 import { Drawer } from "./overlays/drawer/drawer.mjs";
 import { DropdownMenu } from "./overlays/dropdown-menu/dropdown-menu.mjs";
 import { ListBox } from "./overlays/list-box/list-box.mjs";
-export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };
+export { AIIcon, AccessibilityIcon, Accordion, Alert, AlertIcon, Anchor, ArteOdyssey, ArteOdysseyProvider, AtomIcon, Autocomplete, Avatar, BadIcon, Badge, BaselineStatus, BlogIcon, BoringIcon, Breadcrumb, Button, Card, CheckIcon, Checkbox, CheckboxCard, CheckboxGroup, ChevronIcon, CloseIcon, Code, ColorContrastIcon, ColorInfoIcon, CopyIcon, DarkModeIcon, Dialog, DifficultIcon, Drawer, DropdownMenu, EasyIcon, ExternalLinkIcon, FileField, Form, FormControl, FormIcon, GitHubIcon, GoodIcon, Heading, HistoryIcon, HorizontalWritingIcon, IconButton, InformativeIcon, InteractiveCard, InterestingIcon, LightModeIcon, LinkIcon, ListBox, ListIcon, LocationIcon, Logo, LogoIcon, MailIcon, MinusIcon, MixedColorIcon, Modal, NavigationMenuIcon, NewsIcon, NumberField, Pagination, PaletteIcon, PasswordInput, PlusIcon, Popover, PortalRootProvider, PrepareIcon, Progress, PublishDateIcon, QiitaIcon, RSSIcon, Radio, RadioCard, ScrollLinked, Select, SendIcon, Separator, ShallowIcon, ShieldCheckIcon, Skeleton, SlideIcon, Slider, SparklesIcon, Spinner, SubscribeIcon, Switch, Table, TableIcon, Tabs, TagIcon, TextField, Textarea, ToastProvider, Tooltip, TwitterIcon, UpdateDateIcon, VerticalWritingIcon, ViewIcon, ViewOffIcon, useOpenContext, usePortalRoot, useToast };

package/dist/components/layout/separator/separator.d.mts

@@ -4,7 +4,7 @@ import { FC, HTMLAttributes } from "react";
 type Props = {
   orientation?: 'horizontal' | 'vertical';
   color?: 'base' | 'mute' | 'subtle';
-} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role' | 'aria-orientation'>;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'role' | 'aria-orientation' | 'className' | 'style'>;
 declare const Separator: FC<Props>;
 //#endregion
 export { Separator };

package/dist/components/layout/separator/separator.mjs

@@ -1,15 +1,12 @@
 import { cn } from "../../../helpers/cn.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/layout/separator/separator.tsx
-const Separator = ({ orientation = "horizontal", color = "base", className, ...rest }) => {
+const Separator = ({ orientation = "horizontal", color = "base", ...rest }) => {
 	const isVertical = orientation === "vertical";
 	return /* @__PURE__ */ jsx("span", {
 		...rest,
 		"aria-orientation": orientation,
-		className: cn("block", {
-			"h-full w-px": isVertical,
-			"h-px w-full": !isVertical
-		}, color === "base" && "bg-border-base", color === "mute" && "bg-border-mute", color === "subtle" && "bg-border-subtle", className),
+		className: cn("block", isVertical ? "block-full inline-px" : "block-px inline-full", color === "base" && "bg-border-base", color === "mute" && "bg-border-mute", color === "subtle" && "bg-border-subtle"),
 		role: "separator"
 	});
 };

package/dist/components/navigation/anchor/anchor.d.mts

@@ -1,7 +1,7 @@
 import { AnchorHTMLAttributes, ReactNode } from "react";
 
 //#region src/components/navigation/anchor/anchor.d.ts
-type RestProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children' | 'target' | 'rel' | 'className'>;
+type RestProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'children' | 'target' | 'rel' | 'className' | 'style'>;
 type Props<T extends string> = {
   href: T;
   children: ReactNode;

package/dist/components/navigation/anchor/anchor.mjs

@@ -1,12 +1,11 @@
 import { ExternalLinkIcon } from "../../icons/lucide.mjs";
-import { isInternalRoute } from "../../../helpers/is-internal-route.mjs";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/navigation/anchor/anchor.tsx
 const Anchor = ({ href, children, openInNewTab = false, renderAnchor = ({ children: anchorChildren, ...rest }) => /* @__PURE__ */ jsx("a", {
 	...rest,
 	children: anchorChildren
 }), ...rest }) => {
-	const type = isInternalRoute(href) && !openInNewTab ? "internal" : "external";
+	const type = !href.startsWith("http") && !openInNewTab ? "internal" : "external";
 	const baseClassName = "text-fg-info underline transition-colors hover:text-fg-info/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-info focus-visible:rounded-sm";
 	const props = type === "internal" ? {
 		className: baseClassName,

package/dist/components/navigation/breadcrumb/breadcrumb.mjs

@@ -14,7 +14,7 @@ const Item = ({ children }) => /* @__PURE__ */ jsx("li", {
 	children
 });
 const Separator = () => /* @__PURE__ */ jsx("li", {
-	className: "text-fg-mute",
+	className: "text-fg-mute vertical:rotate-90",
 	children: /* @__PURE__ */ jsx(ChevronIcon, {
 		direction: "right",
 		size: "sm"

package/dist/components/navigation/pagination/pagination.mjs

@@ -18,9 +18,12 @@ const Pagination = ({ totalPages, currentPage, onPageChange, disabled = false, p
 						onPageChange(safeCurrent - 1);
 					},
 					size: "sm",
-					startIcon: /* @__PURE__ */ jsx(ChevronIcon, {
-						direction: "left",
-						size: "sm"
+					startIcon: /* @__PURE__ */ jsx("span", {
+						className: "vertical:rotate-90 inline-flex",
+						children: /* @__PURE__ */ jsx(ChevronIcon, {
+							direction: "left",
+							size: "sm"
+						})
 					}),
 					variant: "skeleton",
 					children: prevLabel
@@ -44,9 +47,12 @@ const Pagination = ({ totalPages, currentPage, onPageChange, disabled = false, p
 				/* @__PURE__ */ jsx(Button, {
 					color: "gray",
 					disabled: disabled || safeCurrent >= safeTotal,
-					endIcon: /* @__PURE__ */ jsx(ChevronIcon, {
-						direction: "right",
-						size: "sm"
+					endIcon: /* @__PURE__ */ jsx("span", {
+						className: "vertical:rotate-90 inline-flex",
+						children: /* @__PURE__ */ jsx(ChevronIcon, {
+							direction: "right",
+							size: "sm"
+						})
 					}),
 					onClick: () => {
 						onPageChange(safeCurrent + 1);

package/dist/components/navigation/tabs/tabs.mjs

@@ -1,15 +1,12 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
-import { createContext, use, useEffect, useId, useMemo, useRef, useState } from "react";
+import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as motion from "motion/react-client";
 //#region src/components/navigation/tabs/tabs.tsx
-const TabsProvider = createContext(void 0);
-const useTabsState = () => {
-	const context = use(TabsProvider);
-	if (!context) throw new Error("useTabsState must be used within a TabsProvider");
-	return context;
-};
+const [TabsProvider, useTabsState] = createSafeContext("useTabsState must be used within a TabsProvider");
 const Root = ({ defaultSelectedId = null, ids, children }) => {
 	const defaultIndex = defaultSelectedId !== null && defaultSelectedId !== "" ? ids.indexOf(defaultSelectedId) : 0;
 	const [selectedId, setSelectedId] = useState(defaultSelectedId ?? ids[defaultIndex] ?? ids[0]);
@@ -31,21 +28,22 @@ const Root = ({ defaultSelectedId = null, ids, children }) => {
 		})
 	});
 };
-const TabsListProvider = createContext(void 0);
-const useTabsListState = () => {
-	const context = use(TabsListProvider);
-	if (!context) throw new Error("useTabListState must be used within a TabListProvider");
-	return context;
-};
+const [TabsListProvider, useTabsListState] = createSafeContext("useTabListState must be used within a TabListProvider");
 const List = ({ label, children }) => {
 	const { rootId } = useTabsState();
 	const setFocusRef = useRef(false);
-	const listContextValue = useMemo(() => ({ setFocusRef }), []);
+	const listRef = useRef(null);
+	const writingMode = useWritingMode(listRef);
+	const listContextValue = useMemo(() => ({
+		setFocusRef,
+		writingMode
+	}), [writingMode]);
 	return /* @__PURE__ */ jsx("div", {
 		"aria-label": label,
-		"aria-orientation": "horizontal",
-		className: "border-border-base flex overflow-x-auto overflow-y-hidden border-b p-0.5 wrap-normal",
+		"aria-orientation": writingMode === "vertical" ? "vertical" : "horizontal",
+		className: "border-border-base vertical:border-b-0 vertical:border-l vertical:overflow-x-hidden vertical:overflow-y-auto flex overflow-x-auto overflow-y-hidden border-b p-0.5 wrap-normal",
 		id: `${rootId}-tablist`,
+		ref: listRef,
 		role: "tablist",
 		children: /* @__PURE__ */ jsx(TabsListProvider, {
 			value: listContextValue,
@@ -55,7 +53,7 @@ const List = ({ label, children }) => {
 };
 const Tab = ({ id, children }) => {
 	const { rootId, ids, selectedId, setSelectedId } = useTabsState();
-	const { setFocusRef } = useTabsListState();
+	const { setFocusRef, writingMode } = useTabsListState();
 	const ref = useRef(null);
 	const activeIndex = ids.indexOf(selectedId);
 	const index = ids.indexOf(id);
@@ -69,6 +67,10 @@ const Tab = ({ id, children }) => {
 		index,
 		setFocusRef
 	]);
+	const moveTo = (direction) => {
+		setSelectedId(ids[direction === 1 ? index === ids.length - 1 ? 0 : index + 1 : index === 0 ? ids.length - 1 : index - 1] ?? ids[0]);
+		setFocusRef.current = true;
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		"aria-controls": selectedId === id ? `${rootId}-panel-${id}` : void 0,
 		"aria-selected": selectedId === id,
@@ -78,21 +80,19 @@ const Tab = ({ id, children }) => {
 			setSelectedId(id);
 		},
 		onKeyDown: (e) => {
-			if (e.key === "ArrowLeft") {
-				setSelectedId(ids[index === 0 ? ids.length - 1 : index - 1] ?? ids[0]);
-				setFocusRef.current = true;
+			const prevKey = writingMode === "vertical" ? "ArrowUp" : "ArrowLeft";
+			const nextKey = writingMode === "vertical" ? "ArrowDown" : "ArrowRight";
+			if (e.key === prevKey) {
+				moveTo(-1);
 				return;
 			}
-			if (e.key === "ArrowRight") {
-				setSelectedId(ids[index === ids.length - 1 ? 0 : index + 1] ?? ids[0]);
-				setFocusRef.current = true;
-			}
+			if (e.key === nextKey) moveTo(1);
 		},
 		ref,
 		role: "tab",
 		tabIndex: activeIndex === index ? 0 : -1,
 		children: [selectedId === id && /* @__PURE__ */ jsx(motion.div, {
-			className: "bg-primary-border absolute right-0 -bottom-0.5 left-0 h-1",
+			className: "bg-primary-border absolute start-0 end-0 -inset-be-0.5 block-1",
 			layoutId: `${rootId}-underline`
 		}), children]
 	});

package/dist/components/overlays/dialog/dialog.mjs

@@ -1,16 +1,12 @@
 "use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { CloseIcon } from "../../icons/lucide.mjs";
 import { IconButton } from "../../buttons/icon-button/icon-button.mjs";
 import { Heading } from "../../data-display/heading/heading.mjs";
-import { createContext, use, useId, useMemo } from "react";
+import { useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/overlays/dialog/dialog.tsx
-const DialogContext = createContext(null);
-const useDialogContext = () => {
-	const context = use(DialogContext);
-	if (context === null) throw new Error("useDialogContext must be used within a DialogProvider");
-	return context;
-};
+const [DialogContext, useDialogContext] = createSafeContext("useDialogContext must be used within a DialogProvider");
 const Root = ({ ref, id, children, tabIndex, role = "dialog" }) => {
 	const fallbackId = useId();
 	const rootId = id ?? fallbackId;

package/dist/components/overlays/drawer/drawer.mjs

@@ -16,7 +16,7 @@ const Drawer = ({ title, isOpen, onClose, side = "right", children }) => {
 		children: /* @__PURE__ */ jsxs("section", {
 			"aria-describedby": `${rootId}-content`,
 			"aria-labelledby": `${rootId}-header`,
-			className: "flex h-full flex-col",
+			className: "vertical:flex-row flex h-full flex-col",
 			id: rootId,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "flex shrink-0 items-center justify-center p-4 pb-2",

package/dist/components/overlays/dropdown-menu/dropdown-menu.mjs

@@ -42,7 +42,7 @@ const Content = ({ children }) => {
 		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsx("div", {
 			...props,
 			...contentProps,
-			className: "bg-bg-raised flex min-w-40 flex-col rounded-lg py-2 shadow-md",
+			className: "bg-bg-raised vertical:min-w-0 vertical:min-h-40 flex min-w-40 flex-col rounded-lg py-2 shadow-md",
 			children
 		}) })
 	});

package/dist/components/overlays/dropdown-menu/hooks.d.mts

@@ -9,8 +9,7 @@ type MenuContext = {
   getContentProps: (userProps?: HTMLProps<HTMLElement>) => HTMLAttributes<HTMLElement>;
   getItemProps: (userProps?: Omit<HTMLProps<HTMLButtonElement>, 'selected' | 'active'>) => HTMLAttributes<HTMLElement>;
 };
-declare const MenuContext: _$react.Context<MenuContext | null>;
-declare const MenuContextProvider: _$react.Context<MenuContext | null>;
+declare const MenuContextProvider: _$react.Context<MenuContext | null>, useMenuContext: () => MenuContext;
 declare const useMenuContent: () => {
   contentProps: HTMLAttributes<HTMLElement>;
   itemElementsRef: RefObject<(HTMLElement | null)[]>;
@@ -304,4 +303,4 @@ declare const useMenuItem: ({
 };
 declare const useMenuTrigger: () => (userProps?: HTMLProps<HTMLElement>) => HTMLAttributes<HTMLElement>;
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem, useMenuTrigger };

package/dist/components/overlays/dropdown-menu/hooks.mjs

@@ -1,15 +1,10 @@
 "use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
-import { createContext, use, useMemo } from "react";
+import { useMemo } from "react";
 import { useListItem } from "@floating-ui/react";
 //#region src/components/overlays/dropdown-menu/hooks.ts
-const MenuContext = createContext(null);
-const MenuContextProvider = MenuContext;
-const useMenuContext = () => {
-	const menu = use(MenuContext);
-	if (!menu) throw new Error("useMenuContext must be used within a DropdownMenu.Root");
-	return menu;
-};
+const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a DropdownMenu.Root");
 const useMenuContent = () => {
 	const menu = useMenuContext();
 	return useMemo(() => ({
@@ -42,4 +37,4 @@ const useMenuTrigger = () => {
 	return useMemo(() => menu.getTriggerProps, [menu]);
 };
 //#endregion
-export { MenuContextProvider, useMenuContent, useMenuItem, useMenuTrigger };
+export { MenuContextProvider, useMenuContent, useMenuContext, useMenuItem, useMenuTrigger };

package/dist/components/overlays/list-box/hooks.d.mts

@@ -16,7 +16,6 @@ type MenuContext = {
   getContentProps: (userProps?: HTMLProps<HTMLElement>) => HTMLAttributes<HTMLElement>;
   getItemProps: (userProps?: Omit<HTMLProps<HTMLElement>, 'selected' | 'active'>) => HTMLAttributes<HTMLElement>;
 };
-declare const MenuContext: _$react.Context<MenuContext | null>;
 declare const MenuContextProvider: _$react.Context<MenuContext | null>;
 declare const useMenuContent: () => {
   options: Option[];

package/dist/components/overlays/list-box/hooks.mjs

@@ -1,15 +1,10 @@
 "use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useOpenContext } from "../popover/hooks.mjs";
-import { createContext, use, useMemo } from "react";
+import { useMemo } from "react";
 import { useListItem } from "@floating-ui/react";
 //#region src/components/overlays/list-box/hooks.ts
-const MenuContext = createContext(null);
-const MenuContextProvider = MenuContext;
-const useMenuContext = () => {
-	const menu = use(MenuContext);
-	if (!menu) throw new Error("useMenuContext must be used within a DropdownMenu.Root");
-	return menu;
-};
+const [MenuContextProvider, useMenuContext] = createSafeContext("useMenuContext must be used within a ListBox.Root");
 const useMenuContent = () => {
 	const menu = useMenuContext();
 	return useMemo(() => ({

package/dist/components/overlays/list-box/list-box.mjs

@@ -57,7 +57,7 @@ const Content = ({ helpContent }) => {
 		children: /* @__PURE__ */ jsx(Popover.Content, { renderItem: (props) => /* @__PURE__ */ jsxs("div", {
 			...props,
 			...contentProps,
-			className: "bg-bg-raised flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg py-2 shadow-md",
+			className: "bg-bg-raised vertical:max-h-none vertical:min-w-0 vertical:max-w-48 vertical:min-h-40 vertical:overflow-x-auto vertical:overflow-y-visible flex max-h-48 min-w-40 flex-col overflow-y-auto rounded-lg py-2 shadow-md",
 			children: [helpContent, options.map(({ key, label }, idx) => /* @__PURE__ */ jsx(Item, {
 				index: idx,
 				label

package/dist/components/overlays/modal/modal.mjs

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../../../helpers/cn.mjs";
 import { ToastProvider } from "../../feedback/toast/provider.mjs";
+import { PortalRootProvider } from "../../providers/portal-root.mjs";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as motion from "motion/react-client";
@@ -149,7 +150,7 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
 	}, [isOpen, realRef]);
 	return /* @__PURE__ */ jsx(motion.dialog, {
 		animate: realDialogOpen ? "open" : "closed",
-		className: cn("bg-bg-raised text-fg-base shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
+		className: cn("bg-bg-raised text-fg-base z-modal shadow-md backdrop:bg-back-drop", type === "center" && "m-auto max-h-lg w-5/6 max-w-2xl rounded-lg vertical:h-5/6 vertical:max-h-2xl vertical:w-auto vertical:max-w-lg", type === "bottom" && "mt-auto w-screen max-w-screen rounded-t-lg", type === "right" && "ml-auto h-svh max-h-none w-screen max-w-sm rounded-l-lg", type === "left" && "mr-auto h-svh max-h-none w-screen max-w-sm rounded-r-lg"),
 		exit: "closed",
 		initial: "closed",
 		onClick: (e) => {
@@ -158,10 +159,13 @@ const Modal = ({ ref, type = "center", defaultOpen, isOpen, onClose, children })
 		onClose: realOnClose,
 		ref: realRef,
 		variants: type === "center" ? centerVariants : type === "bottom" ? bottomVariants : type === "left" ? leftVariants : rightVariants,
-		children: /* @__PURE__ */ jsx(ToastProvider, {
-			portalRef: realRef,
-			position: "absolute",
-			children
+		children: /* @__PURE__ */ jsx(PortalRootProvider, {
+			value: realRef,
+			children: /* @__PURE__ */ jsx(ToastProvider, {
+				portalRef: realRef,
+				position: "absolute",
+				children
+			})
 		})
 	});
 };

package/dist/components/overlays/popover/hooks.d.mts

@@ -19,9 +19,7 @@ type PopoverContext = {
   setContentRef: (node: HTMLElement | null) => void;
   contentStyles: CSSProperties;
 };
-declare const PopoverContext: _$react.Context<PopoverContext | null>;
-declare const PopoverProvider: _$react.Context<PopoverContext | null>;
-declare const usePopoverContext: () => PopoverContext;
+declare const PopoverProvider: _$react.Context<PopoverContext | null>, usePopoverContext: () => PopoverContext;
 declare const useFloatingUIContext: () => FloatingContext;
 declare const usePlacement: () => Placement;
 declare const useOpenContext: () => {

package/dist/components/overlays/popover/hooks.mjs

@@ -1,14 +1,9 @@
 "use client";
+import { createSafeContext } from "../../../helpers/create-safe-context.mjs";
 import { useClickAway } from "../../../hooks/click-away/index.mjs";
-import { createContext, use, useMemo, useRef } from "react";
+import { useMemo, useRef } from "react";
 //#region src/components/overlays/popover/hooks.ts
-const PopoverContext = createContext(null);
-const PopoverProvider = PopoverContext;
-const usePopoverContext = () => {
-	const popover = use(PopoverContext);
-	if (!popover) throw new Error("usePopoverContext must be used within a Popover.Root");
-	return popover;
-};
+const [PopoverProvider, usePopoverContext] = createSafeContext("usePopoverContext must be used within a Popover.Root");
 const useFloatingUIContext = () => {
 	const popover = usePopoverContext();
 	return useMemo(() => popover.context, [popover]);

package/dist/components/overlays/popover/popover.mjs

@@ -1,7 +1,9 @@
 "use client";
+import { cn } from "../../../helpers/cn.mjs";
 import { useDisclosure } from "../../../hooks/disclosure/index.mjs";
+import { useWritingMode } from "../../../hooks/writing-mode/index.mjs";
 import { usePortalRoot } from "../../providers/portal-root.mjs";
-import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverTrigger } from "./hooks.mjs";
+import { PopoverProvider, useOpenContext, usePopoverContent, usePopoverContext, usePopoverTrigger } from "./hooks.mjs";
 import { useEffect, useId } from "react";
 import { jsx } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingPortal, autoUpdate, flip, offset, useFloating } from "@floating-ui/react";
@@ -66,14 +68,18 @@ const contentMotionVariants = {
 };
 const Content = ({ renderItem, motionVariants = contentMotionVariants }) => {
 	const { isOpen, trapFocus, context, setContentRef, contentStyles, itemProps } = usePopoverContent();
+	const { triggerRef } = usePopoverContext();
 	const root = usePortalRoot();
+	const protalProps = root ? { root } : {};
+	const writingClass = useWritingMode(triggerRef) === "vertical" ? "writing-v" : void 0;
 	return /* @__PURE__ */ jsx(AnimatePresence, { children: isOpen && /* @__PURE__ */ jsx(FloatingPortal, {
-		...root ? { root } : {},
+		...protalProps,
 		children: /* @__PURE__ */ jsx(FloatingFocusManager, {
 			context,
 			disabled: !trapFocus,
 			modal: false,
 			children: /* @__PURE__ */ jsx("div", {
+				className: cn("z-overlay", writingClass),
 				ref: setContentRef,
 				style: contentStyles,
 				children: /* @__PURE__ */ jsx(motion$1.div, {