@a-type/ui 1.7.7 → 1.7.9

package/src/components/dialog/Dialog.tsx

@@ -210,7 +210,7 @@ const StyledTitle = withClassName(
 
 const StyledDescription = withClassName(
 	DialogPrimitive.Description,
-	'mt-3 mb-6 color-gray8 text-md leading-6',
+	'mt-3 mb-6 color-gray-dark text-md leading-6',
 );
 
 // Exports

package/src/components/dropdownMenu/DropdownMenu.tsx

@@ -60,7 +60,7 @@ const StyledLabel = withClassName(
 
 const StyledSeparator = withClassName(
 	DropdownMenuPrimitive.Separator,
-	'h-1px bg-gray5 m-5px',
+	'h-1px bg-gray m-5px',
 );
 
 const StyledItemIndicator = withClassName(

package/src/components/icon/generated/IconSpritesheet.tsx

@@ -976,6 +976,174 @@ export const IconSpritesheet = (props: any) => (
 				<circle cx="4" cy="7.5" r="2" fill="currentColor" />
 				<path d="M11.5 2.5L3.5 7.5L11.5 12.5" stroke="currentColor" />
 			</symbol>
+			<symbol id="icon-italic" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5.67494 3.50017C5.67494 3.25164 5.87641 3.05017 6.12494 3.05017H10.6249C10.8735 3.05017 11.0749 3.25164 11.0749 3.50017C11.0749 3.7487 10.8735 3.95017 10.6249 3.95017H9.00587L7.2309 11.05H8.87493C9.12345 11.05 9.32493 11.2515 9.32493 11.5C9.32493 11.7486 9.12345 11.95 8.87493 11.95H4.37493C4.1264 11.95 3.92493 11.7486 3.92493 11.5C3.92493 11.2515 4.1264 11.05 4.37493 11.05H5.99397L7.76894 3.95017H6.12494C5.87641 3.95017 5.67494 3.7487 5.67494 3.50017Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-bold" viewBox="0 0 15 15">
+				<path
+					d="M5.10505 12C4.70805 12 4.4236 11.912 4.25171 11.736C4.0839 11.5559 4 11.2715 4 10.8827V4.11733C4 3.72033 4.08595 3.43588 4.25784 3.26398C4.43383 3.08799 4.71623 3 5.10505 3C6.42741 3 8.25591 3 9.02852 3C10.1373 3 11.0539 3.98153 11.0539 5.1846C11.0539 6.08501 10.6037 6.81855 9.70327 7.23602C10.8657 7.44851 11.5176 8.62787 11.5176 9.48128C11.5176 10.5125 10.9902 12 9.27734 12C8.77742 12 6.42626 12 5.10505 12ZM8.37891 8.00341H5.8V10.631H8.37891C8.9 10.631 9.6296 10.1211 9.6296 9.29877C9.6296 8.47643 8.9 8.00341 8.37891 8.00341ZM5.8 4.36903V6.69577H8.17969C8.53906 6.69577 9.27734 6.35939 9.27734 5.50002C9.27734 4.64064 8.48047 4.36903 8.17969 4.36903H5.8Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-capitalization" viewBox="0 0 15 15">
+				<g clipPath="url(#clip0_1084_29)">
+					<path
+						fillRule="evenodd"
+						clipRule="evenodd"
+						d="M11.2895 2.75C11.4964 2.74979 11.6821 2.87701 11.7565 3.07003L14.9664 11.39C15.0657 11.6477 14.9375 11.9371 14.6798 12.0365C14.4222 12.1359 14.1328 12.0076 14.0334 11.75L12.9822 9.02537H9.61106L8.56672 11.749C8.46786 12.0068 8.1787 12.1357 7.92086 12.0369C7.66302 11.938 7.53415 11.6488 7.63301 11.391L10.8232 3.07099C10.8972 2.87782 11.0826 2.75021 11.2895 2.75ZM11.2915 4.64284L12.6543 8.17537H9.93698L11.2915 4.64284ZM2.89895 5.20703C1.25818 5.20703 0.00915527 6.68569 0.00915527 8.60972C0.00915527 10.6337 1.35818 12.0124 2.89895 12.0124C3.72141 12.0124 4.57438 11.6692 5.15427 11.0219V11.53C5.15427 11.7785 5.35574 11.98 5.60427 11.98C5.8528 11.98 6.05427 11.7785 6.05427 11.53V5.72C6.05427 5.47147 5.8528 5.27 5.60427 5.27C5.35574 5.27 5.15427 5.47147 5.15427 5.72V6.22317C4.60543 5.60095 3.79236 5.20703 2.89895 5.20703ZM5.15427 9.79823V7.30195C4.76393 6.58101 3.94144 6.05757 3.08675 6.05757C2.10885 6.05757 1.03503 6.96581 1.03503 8.60955C1.03503 10.1533 2.00885 11.1615 3.08675 11.1615C3.97011 11.1615 4.77195 10.4952 5.15427 9.79823Z"
+						fill="currentColor"
+					/>
+				</g>
+				<defs>
+					<clipPath id="clip0_1084_29">
+						<rect width="15" height="15" fill="white" />
+					</clipPath>
+				</defs>
+			</symbol>
+			<symbol id="icon-underline" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5.00001 2.75C5.00001 2.47386 4.77615 2.25 4.50001 2.25C4.22387 2.25 4.00001 2.47386 4.00001 2.75V8.05C4.00001 9.983 5.56702 11.55 7.50001 11.55C9.43301 11.55 11 9.983 11 8.05V2.75C11 2.47386 10.7762 2.25 10.5 2.25C10.2239 2.25 10 2.47386 10 2.75V8.05C10 9.43071 8.88072 10.55 7.50001 10.55C6.1193 10.55 5.00001 9.43071 5.00001 8.05V2.75ZM3.49998 13.1001C3.27906 13.1001 3.09998 13.2791 3.09998 13.5001C3.09998 13.721 3.27906 13.9001 3.49998 13.9001H11.5C11.7209 13.9001 11.9 13.721 11.9 13.5001C11.9 13.2791 11.7209 13.1001 11.5 13.1001H3.49998Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-textAlignLeft" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H7.5C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H10.5C10.7761 10 11 10.2239 11 10.5C11 10.7761 10.7761 11 10.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-textAlignRight" viewBox="0 0 15 15">
+				<path
+					d="M4.5 10.5H12.5M7.5 7.5H12.5M2.5 4.5H12.5"
+					stroke="currentColor"
+					strokeLinecap="round"
+				/>
+			</symbol>
+			<symbol id="icon-textAlignCenter" viewBox="0 0 15 15">
+				<path
+					d="M3.5 10.5H11.5M4.5 7.5H10.5M2.5 4.5H12.5"
+					stroke="currentColor"
+					strokeLinecap="round"
+				/>
+			</symbol>
+			<symbol id="icon-textJustify" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M2.5 4C2.22386 4 2 4.22386 2 4.5C2 4.77614 2.22386 5 2.5 5H12.5C12.7761 5 13 4.77614 13 4.5C13 4.22386 12.7761 4 12.5 4H2.5ZM2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5ZM2 10.5C2 10.2239 2.22386 10 2.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H2.5C2.22386 11 2 10.7761 2 10.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-paragraph" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M3 5.5C3 7.983 4.99169 9 7 9V12.5C7 12.7761 7.22386 13 7.5 13C7.77614 13 8 12.7761 8 12.5V9V3.1H9V12.5C9 12.7761 9.22386 13 9.5 13C9.77614 13 10 12.7761 10 12.5V3.1H11.5C11.8038 3.1 12.05 2.85376 12.05 2.55C12.05 2.24624 11.8038 2 11.5 2H9.5H8H7.5H7C4.99169 2 3 3.017 3 5.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-highlight" viewBox="0 0 15 15">
+				<rect
+					x="1"
+					y="1"
+					width="13"
+					height="13"
+					rx="2"
+					fill="#898989"
+					fillOpacity="0.14"
+				/>
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M8.55569 2C8.30717 2 8.10569 2.20147 8.10569 2.45C8.10569 2.69853 8.30717 2.9 8.55569 2.9H9.49114V6.96543H5.48545V2.9H6.42833C6.67686 2.9 6.87833 2.69853 6.87833 2.45C6.87833 2.20147 6.67686 2 6.42833 2H3.45C3.20147 2 3 2.20147 3 2.45C3 2.69853 3.20147 2.9 3.45 2.9H4.38545V11.9311H3.45C3.20147 11.9311 3 12.1326 3 12.3811C3 12.6297 3.20147 12.8311 3.45 12.8311H6.42833C6.67686 12.8311 6.87833 12.6297 6.87833 12.3811C6.87833 12.1326 6.67686 11.9311 6.42833 11.9311H5.48545V7.86543H9.49114V11.9311H8.55569C8.30717 11.9311 8.10569 12.1326 8.10569 12.3811C8.10569 12.6297 8.30717 12.8311 8.55569 12.8311H11.534C11.7826 12.8311 11.984 12.6297 11.984 12.3811C11.984 12.1326 11.7826 11.9311 11.534 11.9311H10.5911V2.9H11.534C11.7826 2.9 11.984 2.69853 11.984 2.45C11.984 2.20147 11.7826 2 11.534 2H8.55569Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-pushLeft" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M2.05005 13.5C2.05005 13.7485 2.25152 13.95 2.50005 13.95C2.74858 13.95 2.95005 13.7485 2.95005 13.5L2.95005 1.49995C2.95005 1.25142 2.74858 1.04995 2.50005 1.04995C2.25152 1.04995 2.05005 1.25142 2.05005 1.49995L2.05005 13.5ZM8.4317 11.0681C8.60743 11.2439 8.89236 11.2439 9.06809 11.0681C9.24383 10.8924 9.24383 10.6075 9.06809 10.4317L6.58629 7.94993L14.5 7.94993C14.7485 7.94993 14.95 7.74846 14.95 7.49993C14.95 7.2514 14.7485 7.04993 14.5 7.04993L6.58629 7.04993L9.06809 4.56813C9.24383 4.39239 9.24383 4.10746 9.06809 3.93173C8.89236 3.75599 8.60743 3.75599 8.4317 3.93173L5.1817 7.18173C5.00596 7.35746 5.00596 7.64239 5.1817 7.81812L8.4317 11.0681Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-pushRight" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M12.95 1.50005C12.95 1.25152 12.7485 1.05005 12.5 1.05005C12.2514 1.05005 12.05 1.25152 12.05 1.50005L12.05 13.5C12.05 13.7486 12.2514 13.95 12.5 13.95C12.7485 13.95 12.95 13.7486 12.95 13.5L12.95 1.50005ZM6.5683 3.93188C6.39257 3.75614 6.10764 3.75614 5.93191 3.93188C5.75617 4.10761 5.75617 4.39254 5.93191 4.56827L8.41371 7.05007L0.499984 7.05007C0.251456 7.05007 0.0499847 7.25155 0.0499847 7.50007C0.0499846 7.7486 0.251457 7.95007 0.499984 7.95007L8.41371 7.95007L5.93191 10.4319C5.75617 10.6076 5.75617 10.8925 5.93191 11.0683C6.10764 11.244 6.39257 11.244 6.56831 11.0683L9.8183 7.81827C9.99404 7.64254 9.99404 7.35761 9.8183 7.18188L6.5683 3.93188Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-pushUp" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M1.50005 1.05005C1.25152 1.05005 1.05005 1.25152 1.05005 1.50005C1.05005 1.74858 1.25152 1.95005 1.50005 1.95005L13.5 1.95005C13.7486 1.95005 13.95 1.74858 13.95 1.50005C13.95 1.25152 13.7486 1.05005 13.5 1.05005H1.50005ZM3.93188 7.43169C3.75614 7.60743 3.75614 7.89236 3.93188 8.06809C4.10761 8.24383 4.39254 8.24383 4.56827 8.06809L7.05007 5.58629V13.5C7.05007 13.7485 7.25155 13.95 7.50007 13.95C7.7486 13.95 7.95007 13.7485 7.95007 13.5L7.95007 5.58629L10.4319 8.06809C10.6076 8.24383 10.8925 8.24383 11.0683 8.06809C11.244 7.89235 11.244 7.60743 11.0683 7.43169L7.81827 4.18169C7.64254 4.00596 7.35761 4.00596 7.18188 4.18169L3.93188 7.43169Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-pushDown" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M13.5 13.95C13.7485 13.95 13.95 13.7485 13.95 13.5C13.95 13.2514 13.7485 13.05 13.5 13.05L1.49995 13.05C1.25142 13.05 1.04995 13.2514 1.04995 13.5C1.04995 13.7485 1.25142 13.95 1.49995 13.95L13.5 13.95ZM11.0681 7.5683C11.2439 7.39257 11.2439 7.10764 11.0681 6.93191C10.8924 6.75617 10.6075 6.75617 10.4317 6.93191L7.94993 9.41371L7.94993 1.49998C7.94993 1.25146 7.74846 1.04998 7.49993 1.04998C7.2514 1.04998 7.04993 1.25146 7.04993 1.49998L7.04993 9.41371L4.56813 6.93191C4.39239 6.75617 4.10746 6.75617 3.93173 6.93191C3.75599 7.10764 3.75599 7.39257 3.93173 7.5683L7.18173 10.8183C7.35746 10.994 7.64239 10.994 7.81812 10.8183L11.0681 7.5683Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-bulletList" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M1.5 5.25C1.91421 5.25 2.25 4.91421 2.25 4.5C2.25 4.08579 1.91421 3.75 1.5 3.75C1.08579 3.75 0.75 4.08579 0.75 4.5C0.75 4.91421 1.08579 5.25 1.5 5.25ZM4 4.5C4 4.22386 4.22386 4 4.5 4H13.5C13.7761 4 14 4.22386 14 4.5C14 4.77614 13.7761 5 13.5 5H4.5C4.22386 5 4 4.77614 4 4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H13.5C13.7761 8 14 7.77614 14 7.5C14 7.22386 13.7761 7 13.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H13.5C13.7761 11 14 10.7761 14 10.5C14 10.2239 13.7761 10 13.5 10H4.5ZM2.25 7.5C2.25 7.91421 1.91421 8.25 1.5 8.25C1.08579 8.25 0.75 7.91421 0.75 7.5C0.75 7.08579 1.08579 6.75 1.5 6.75C1.91421 6.75 2.25 7.08579 2.25 7.5ZM1.5 11.25C1.91421 11.25 2.25 10.9142 2.25 10.5C2.25 10.0858 1.91421 9.75 1.5 9.75C1.08579 9.75 0.75 10.0858 0.75 10.5C0.75 10.9142 1.08579 11.25 1.5 11.25Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-name106" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M5.39999 4C5.12385 4 4.89999 4.22386 4.89999 4.5C4.89999 4.77614 5.12385 5 5.39999 5H13.5C13.7761 5 14 4.77614 14 4.5C14 4.22386 13.7761 4 13.5 4H5.39999ZM5.39999 9C5.12385 9 4.89999 9.22386 4.89999 9.5C4.89999 9.77614 5.12385 10 5.39999 10H13.5C13.7761 10 14 9.77614 14 9.5C14 9.22386 13.7761 9 13.5 9H5.39999Z"
+					fill="currentColor"
+				/>
+				<path
+					d="M2.50142 3.09091V6H1.88636V3.67472H1.86932L1.20312 4.09233V3.54688L1.9233 3.09091H2.50142ZM1.2358 11V10.5568L2.27131 9.59801C2.35938 9.51278 2.43324 9.43608 2.4929 9.3679C2.5535 9.29972 2.59943 9.23295 2.63068 9.16761C2.66193 9.10133 2.67756 9.02983 2.67756 8.95312C2.67756 8.8679 2.65814 8.79451 2.61932 8.73295C2.58049 8.67045 2.52746 8.62263 2.46023 8.58949C2.39299 8.5554 2.31676 8.53835 2.23153 8.53835C2.14252 8.53835 2.06487 8.55634 1.99858 8.59233C1.93229 8.62831 1.88116 8.67992 1.84517 8.74716C1.80919 8.81439 1.79119 8.89441 1.79119 8.98722H1.20739C1.20739 8.79687 1.25047 8.63163 1.33665 8.49148C1.42282 8.35133 1.54356 8.2429 1.69886 8.16619C1.85417 8.08949 2.03314 8.05114 2.2358 8.05114C2.44413 8.05114 2.62547 8.08807 2.77983 8.16193C2.93513 8.23485 3.05587 8.33617 3.14205 8.46591C3.22822 8.59564 3.27131 8.74432 3.27131 8.91193C3.27131 9.02178 3.24953 9.13021 3.20597 9.23722C3.16335 9.34422 3.08712 9.46307 2.97727 9.59375C2.86742 9.72348 2.71259 9.87926 2.51278 10.0611L2.08807 10.4773V10.4972H3.30966V11H1.2358Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-quote" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9.42503 3.44136C10.0561 3.23654 10.7837 3.2402 11.3792 3.54623C12.7532 4.25224 13.3477 6.07191 12.7946 8C12.5465 8.8649 12.1102 9.70472 11.1861 10.5524C10.262 11.4 8.98034 11.9 8.38571 11.9C8.17269 11.9 8 11.7321 8 11.525C8 11.3179 8.17644 11.15 8.38571 11.15C9.06497 11.15 9.67189 10.7804 10.3906 10.236C10.9406 9.8193 11.3701 9.28633 11.608 8.82191C12.0628 7.93367 12.0782 6.68174 11.3433 6.34901C10.9904 6.73455 10.5295 6.95946 9.97725 6.95946C8.7773 6.95946 8.0701 5.99412 8.10051 5.12009C8.12957 4.28474 8.66032 3.68954 9.42503 3.44136ZM3.42503 3.44136C4.05614 3.23654 4.78366 3.2402 5.37923 3.54623C6.7532 4.25224 7.34766 6.07191 6.79462 8C6.54654 8.8649 6.11019 9.70472 5.1861 10.5524C4.26201 11.4 2.98034 11.9 2.38571 11.9C2.17269 11.9 2 11.7321 2 11.525C2 11.3179 2.17644 11.15 2.38571 11.15C3.06497 11.15 3.67189 10.7804 4.39058 10.236C4.94065 9.8193 5.37014 9.28633 5.60797 8.82191C6.06282 7.93367 6.07821 6.68174 5.3433 6.34901C4.99037 6.73455 4.52948 6.95946 3.97725 6.95946C2.7773 6.95946 2.0701 5.99412 2.10051 5.12009C2.12957 4.28474 2.66032 3.68954 3.42503 3.44136Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-code" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M9.96424 2.68571C10.0668 2.42931 9.94209 2.13833 9.6857 2.03577C9.4293 1.93322 9.13832 2.05792 9.03576 2.31432L5.03576 12.3143C4.9332 12.5707 5.05791 12.8617 5.3143 12.9642C5.5707 13.0668 5.86168 12.9421 5.96424 12.6857L9.96424 2.68571ZM3.85355 5.14646C4.04882 5.34172 4.04882 5.6583 3.85355 5.85356L2.20711 7.50001L3.85355 9.14646C4.04882 9.34172 4.04882 9.6583 3.85355 9.85356C3.65829 10.0488 3.34171 10.0488 3.14645 9.85356L1.14645 7.85356C0.951184 7.6583 0.951184 7.34172 1.14645 7.14646L3.14645 5.14646C3.34171 4.9512 3.65829 4.9512 3.85355 5.14646ZM11.1464 5.14646C11.3417 4.9512 11.6583 4.9512 11.8536 5.14646L13.8536 7.14646C14.0488 7.34172 14.0488 7.6583 13.8536 7.85356L11.8536 9.85356C11.6583 10.0488 11.3417 10.0488 11.1464 9.85356C10.9512 9.6583 10.9512 9.34172 11.1464 9.14646L12.7929 7.50001L11.1464 5.85356C10.9512 5.6583 10.9512 5.34172 11.1464 5.14646Z"
+					fill="currentColor"
+				/>
+			</symbol>
+			<symbol id="icon-newPage" viewBox="0 0 15 15">
+				<path
+					fillRule="evenodd"
+					clipRule="evenodd"
+					d="M3.5 2C3.22386 2 3 2.22386 3 2.5V12.5C3 12.7761 3.22386 13 3.5 13H11.5C11.7761 13 12 12.7761 12 12.5V4.70711L9.29289 2H3.5ZM2 2.5C2 1.67157 2.67157 1 3.5 1H9.5C9.63261 1 9.75979 1.05268 9.85355 1.14645L12.7803 4.07322C12.921 4.21388 13 4.40464 13 4.60355V12.5C13 13.3284 12.3284 14 11.5 14H3.5C2.67157 14 2 13.3284 2 12.5V2.5ZM4.75 7.5C4.75 7.22386 4.97386 7 5.25 7H7V5.25C7 4.97386 7.22386 4.75 7.5 4.75C7.77614 4.75 8 4.97386 8 5.25V7H9.75C10.0261 7 10.25 7.22386 10.25 7.5C10.25 7.77614 10.0261 8 9.75 8H8V9.75C8 10.0261 7.77614 10.25 7.5 10.25C7.22386 10.25 7 10.0261 7 9.75V8H5.25C4.97386 8 4.75 7.77614 4.75 7.5Z"
+					fill="currentColor"
+				/>
+			</symbol>
 		</defs>
 	</svg>
 );

package/src/components/icon/generated/iconNames.ts

@@ -87,6 +87,25 @@ export const iconNames = [
 	'enterKey',
 	'gamePiece',
 	'share',
+	'italic',
+	'bold',
+	'capitalization',
+	'underline',
+	'textAlignLeft',
+	'textAlignRight',
+	'textAlignCenter',
+	'textJustify',
+	'paragraph',
+	'highlight',
+	'pushLeft',
+	'pushRight',
+	'pushUp',
+	'pushDown',
+	'bulletList',
+	'name106',
+	'quote',
+	'code',
+	'newPage',
 ] as const;
 
 export type IconName = (typeof iconNames)[number];

package/src/components/peek/Peek.tsx

@@ -60,7 +60,7 @@ export function Peek({ peekHeight = 120, children, className }: PeekProps) {
 					className={classNames(
 						'h-80px absolute bottom-0 z-1 bg-transparent border-none w-full cursor-pointer border-b border-solid border-white',
 						'focus-visible:(outline-none bg-gradient-to-b from-transparent to-primary-wash border-b border-solid border-primary',
-						'after:(content-["-_tap_to_expand_-"] p-3 color-gray9 text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
+						'after:(content-["-_tap_to_expand_-"] p-3 color-gray-dark text-xs flex flex-col justify-end items-center absolute inset-0 top-auto h-80px bg-gradient-to-b from-transparent to-white)',
 						'after:[&[data-state=open]]:content-["-_tap_to_collapse_-"]',
 					)}
 					onClick={toggle}

package/src/components/select/Select.tsx

@@ -45,7 +45,7 @@ export const SelectItem = ({
 export const SelectItemRoot = withClassName(
 	SelectPrimitive.Item,
 	'layer-components:(text-md leading-4 color-black rounded-sm flex items-center flex-row h-36px pr-4 pl-35px relative select-none)',
-	'layer-components:[&[data-disabled]]:(color-gray5 pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
+	'layer-components:[&[data-disabled]]:(color-gray pointer-events-none) [&[data-highlighted]]:(outline-none bg-primary-wash color-black)',
 	'layer-components:[&:first-child]:(rounded-t-lg)',
 	'layer-components:[&:last-child]:(rounded-b-lg)',
 );
@@ -78,7 +78,7 @@ export const SelectGroup = (props: SelectPrimitive.SelectGroupProps) => {
 export const SelectRoot = SelectPrimitive.Root;
 export const selectTriggerClassName = classNames(
 	getButtonClassName({ color: 'default' }),
-	'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray8)',
+	'layer-components:([all:unset] inline-flex [&[data-placeholder]]:color-gray-dark)',
 );
 export const SelectTriggerBase = withNoNativeRender(
 	withClassName(SelectPrimitive.Trigger, selectTriggerClassName),
@@ -120,7 +120,7 @@ export const SelectLabel = withNoNativeRender(
 	),
 );
 export const SelectSeparator = withNoNativeRender(
-	withClassName(SelectPrimitive.Separator, 'h-1px bg-gray50 m-1'),
+	withClassName(SelectPrimitive.Separator, 'h-1px bg-gray-light m-1'),
 );
 export const SelectIcon = withNoNativeRender(
 	({
@@ -187,7 +187,7 @@ export const NativeSelect = ({
 		<div className={classNames('relative', className)}>
 			<select
 				className={classNames(
-					'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-lg px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray5 hover:border-gray7 focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray8',
+					'appearance-none font-inherit bg-white inline-flex items-center justify-center rounded-lg px-3 py-1 pr-8 text-sm gap-2 color-black border-solid border border-gray hover:border-gray-dark focus:outline-none focus-visible:shadow-focus [&[data-placeholder]]:color-gray-dark',
 				)}
 				{...props}
 				ref={forwardedRef}

package/src/components/skeletons/skeletons.tsx

@@ -15,7 +15,7 @@ export const TextSkeleton = ({
 	return (
 		<span
 			className={classNames(
-				'w-full h-full rounded-md bg-gradient-to-r from-gray1 via-gray2 to-gray1 [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
+				'w-full h-full rounded-md bg-gradient-to-r from-gray-wash via-gray-light to-gray-wash [background-size:400%_400%] max-w-full animate-skeleton animate-duration-1200 animate-ease-in-out animate-iteration-infinite animate-alternate',
 				className,
 			)}
 			style={{

package/src/components/toggleGroup/toggleGroup.tsx

@@ -3,11 +3,11 @@ import { withClassName } from '../../hooks/withClassName.js';
 
 export const ToggleGroupRoot = withClassName(
 	ToggleGroupPrimitive.Root,
-	'inline-flex bg-gray1 rounded-lg gap-1',
+	'inline-flex bg-gray-wash bg-darken-1 rounded-lg gap-1',
 );
 export const ToggleGroupItem = withClassName(
 	ToggleGroupPrimitive.Item,
-	'rounded-xl bg-gray2 py-1 px-2 flex items-center justify-center cursor-pointer hover:bg-gray3 active:bg-gray4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
+	'rounded-xl color-black bg-gray-light py-sm px-md flex items-center border-none justify-center cursor-pointer hover:bg-darken-2 active:bg-darken-4 focus-visible:(shadow-focus outline-off) [&[data-state=on]]:(bg-primary-light border-black)',
 );
 
 export const ToggleGroup = Object.assign(ToggleGroupRoot, {

package/src/components/typography/typography.tsx

@@ -9,7 +9,7 @@ export const H1 = withClassName(
 export const H2 = withClassName(
 	'h2',
 	baseHeadingClass,
-	'layer-components:(text-lg font-title font-bold color-gray9)',
+	'layer-components:(text-lg font-title font-bold color-gray-dark)',
 );
 export const H3 = withClassName(
 	'h3',

package/src/hooks/useVisualViewportOffset.ts

@@ -98,13 +98,13 @@ function useReactToViewportChanges(
 
 		update();
 
-		window.addEventListener('scroll', update, { passive: true });
+		window.addEventListener('scroll', debouncedUpdate, { passive: true });
 		viewport.addEventListener('resize', update);
 		viewport.addEventListener('scroll', debouncedUpdate, { passive: true });
 
 		return () => {
+			window.removeEventListener('scroll', debouncedUpdate);
 			viewport.removeEventListener('resize', update);
-			window.removeEventListener('scroll', update);
 			viewport.removeEventListener('scroll', debouncedUpdate);
 		};
 	}, [stableCb, disable]);

package/src/themes.stories.tsx

@@ -8,9 +8,15 @@ import {
 	AvatarList,
 	Box,
 	Checkbox,
+	ContextMenu,
 	DateRangePicker,
 	Dialog,
 	DropdownMenu,
+	H1,
+	H2,
+	H3,
+	H4,
+	HorizontalList,
 	ImageUploader,
 	NavBarItem,
 	NavBarItemIcon,
@@ -19,10 +25,13 @@ import {
 	NavBarItemText,
 	NavBarRoot,
 	Note,
+	P,
 	PageContent,
 	PageNav,
 	PageRoot,
 	Progress,
+	TextSkeleton,
+	ToggleGroup,
 	Tooltip,
 } from './components/index.js';
 import { Input } from './components/input/index.js';
@@ -70,6 +79,22 @@ function DemoUI({ className }: { className?: string }) {
 							<Checkbox defaultChecked />
 							<span>Checkbox</span>
 						</Box>
+						<ToggleGroup type="single">
+							<ToggleGroup.Item value="1">Toggle 1</ToggleGroup.Item>
+							<ToggleGroup.Item value="2">Toggle 2</ToggleGroup.Item>
+						</ToggleGroup>
+					</Box>
+					<Box layout="start center" d="col" gap p>
+						<H1>Heading 1</H1>
+						<H2>Heading 2</H2>
+						<H3>Heading 3</H3>
+						<H4>Heading 4</H4>
+						<P>
+							Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+							eiusmod tempor incididunt ut labore et dolore magna aliqua.
+						</P>
+						<TextSkeleton maxLength={30} />
+						<TextSkeleton maxLength={10} />
 					</Box>
 					<Card>
 						<Card.Main onClick={() => {}}>
@@ -111,9 +136,19 @@ function DemoUI({ className }: { className?: string }) {
 						<AvatarList.Item index={1} name="Jane Doe" />
 						<AvatarList.Item index={2} name="John Smith" />
 					</AvatarList>
-					<Tooltip content="Hello World">
-						<Button>Hover me</Button>
-					</Tooltip>
+					<ContextMenu>
+						<ContextMenu.Trigger asChild>
+							<Tooltip content="Hello World">
+								<Button>Hover or right click</Button>
+							</Tooltip>
+						</ContextMenu.Trigger>
+						<ContextMenu.Content>
+							<ContextMenu.Arrow />
+							<ContextMenu.Item>Item 1</ContextMenu.Item>
+							<ContextMenu.Item>Item 2</ContextMenu.Item>
+							<ContextMenu.Item>Item 3</ContextMenu.Item>
+						</ContextMenu.Content>
+					</ContextMenu>
 					<Dialog>
 						<Dialog.Trigger asChild>
 							<Button>Click</Button>
@@ -151,9 +186,19 @@ function DemoUI({ className }: { className?: string }) {
 					<Box>
 						<Note>Note note</Note>
 					</Box>
-					<ImageUploader className="h-400px" value={null} onChange={() => {}} />
+					<Box justify="start" items="start">
+						<HorizontalList openDirection="down">
+							<Button size="small">One</Button>
+							<Button size="small">Two</Button>
+							<Button size="small">Three</Button>
+							<Button size="small">Four</Button>
+							<Button size="small">Five</Button>
+							<Button size="small">Six</Button>
+						</HorizontalList>
+					</Box>
+					<ImageUploader className="h-200px" value={null} onChange={() => {}} />
 					<DropdownMenu>
-						<DropdownMenu.Trigger asChild>
+						<DropdownMenu.Trigger asChild className="m-auto">
 							<Button>Dropdown</Button>
 						</DropdownMenu.Trigger>
 						<DropdownMenu.Content>

package/src/uno.preset.ts

@@ -25,7 +25,7 @@ export default function presetAglio({
 	},
 	borderScale = 1,
 	roundedness = 1,
-	saturation = 15,
+	saturation = 10,
 }: {
 	scale?: 'sm' | 'md' | 'lg';
 	interFontLocation?: string;
@@ -506,7 +506,7 @@ export default function presetAglio({
 
 		shortcuts: {
 			'border-default': 'border border-solid border-black',
-			'border-light': 'border border-solid border-gray5',
+			'border-light': 'border border-solid border-gray',
 			'flex-1-0-0': 'flex-grow-1 flex-shrink-0 flex-basis-0',
 			'flex-0-0-auto': 'flex-grow-0 flex-shrink-0 flex-basis-auto',
 			row: 'layer-components:flex layer-components:flex-row layer-components:gap-2 layer-components:items-center',
@@ -557,7 +557,7 @@ export default function presetAglio({
 					--palette-red-30: #ae562d;
 					--palette-red-20: #804020;
 					--palette-red-10: #702604;
-					--palette-red-00: #321f19;
+					--palette-red-00:rgb(52, 39, 35);
 					--palette-green-90: #e8ffef;
 					--palette-green-80: #c2ffe9;
 					--palette-green-70: #92f2d1;
@@ -567,7 +567,7 @@ export default function presetAglio({
 					--palette-green-30: #1f837c;
 					--palette-green-20: #246869;
 					--palette-green-10: #274e50;
-					--palette-green-00: #18352e;
+					--palette-green-00:rgb(32, 48, 44);
 					--palette-yellow-90: #fff9ee;
 					--palette-yellow-80: #fff1c7;
 					--palette-yellow-70: #ffdf7c;
@@ -577,7 +577,7 @@ export default function presetAglio({
 					--palette-yellow-30: #8e5c00;
 					--palette-yellow-20: #714d00;
 					--palette-yellow-10: #634500;
-					--palette-yellow-00:rgb(59, 45, 0);
+					--palette-yellow-00:rgb(56, 50, 30);
 					--palette-blue-90:rgb(231, 246, 255);
 					--palette-blue-80: #c4e7ff;
 					--palette-blue-70: #87d3fc;
@@ -587,7 +587,7 @@ export default function presetAglio({
 					--palette-blue-30: #077da7;
 					--palette-blue-20: #005979;
 					--palette-blue-10: #004c69;
-					--palette-blue-00: #092c3a;
+					--palette-blue-00:rgb(25, 39, 44);
 					--palette-purple-90:rgb(239, 236, 255);
 					--palette-purple-80: #e0e0ff;
 					--palette-purple-70: #c8cdff;