@makeswift/runtime 0.28.10-canary.9 → 0.29.0-canary.19

package/dist/esm/components/builtin/Image/register.js

@@ -12,6 +12,7 @@ import {
   ElementID,
   Image,
   ResponsiveOpacity,
+  ResponsiveSelect,
   TextInput
 } from "@makeswift/prop-controllers";
 function registerComponent(runtime) {
@@ -26,6 +27,17 @@ function registerComponent(runtime) {
         altText: TextInput({ label: "Alt text" }),
         link: Link({ label: "On click" }),
         width: Width(),
+        aspectRatio: ResponsiveSelect({
+          label: "Aspect ratio",
+          labelOrientation: "vertical",
+          options: [
+            { value: "original", label: "Original" },
+            { value: "16:9", label: "16:9" },
+            { value: "4:3", label: "4:3" },
+            { value: "1:1", label: "1:1" }
+          ],
+          defaultValue: "original"
+        }),
         margin: Margin({ format: Margin.Format.ClassName }),
         padding: Padding({ format: Padding.Format.ClassName }),
         border: Border({ format: Border.Format.ClassName }),

package/dist/esm/components/builtin/Image/register.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  Border,\n  Link,\n  Shadows,\n  Checkbox,\n  BorderRadius,\n  Margin,\n  Padding,\n  Width,\n  ElementID,\n  Image,\n  ResponsiveOpacity,\n  TextInput,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  return runtime.registerComponent(\n    lazy(() => import('./Image')),\n    {\n      type: MakeswiftComponentType.Image,\n      label: 'Image',\n      props: {\n        id: ElementID(),\n        file: Image(),\n        altText: TextInput({ label: 'Alt text' }),\n        link: Link({ label: 'On click' }),\n        width: Width(),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({ format: Padding.Format.ClassName }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        opacity: ResponsiveOpacity(),\n        priority: Checkbox({ label: 'Priority' }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,YAAY;AAErB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB,SAA2B;AAC3D,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,MAAM,MAAM;AAAA,QACZ,SAAS,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QACxC,MAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QAChC,OAAO,MAAM;AAAA,QACb,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,SAAS,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACrD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,cAAc,aAAa,EAAE,QAAQ,aAAa,OAAO,UAAU,CAAC;AAAA,QACpE,WAAW,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACvD,SAAS,kBAAkB;AAAA,QAC3B,UAAU,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}
+{"version":3,"sources":["../../../../../src/components/builtin/Image/register.ts"],"sourcesContent":["import { lazy } from 'react'\nimport { type ReactRuntimeCore } from '../../../runtimes/react/react-runtime-core'\nimport { MakeswiftComponentType } from '../constants'\nimport {\n  Border,\n  Link,\n  Shadows,\n  Checkbox,\n  BorderRadius,\n  Margin,\n  Padding,\n  Width,\n  ElementID,\n  Image,\n  ResponsiveOpacity,\n  ResponsiveSelect,\n  TextInput,\n} from '@makeswift/prop-controllers'\n\nexport function registerComponent(runtime: ReactRuntimeCore) {\n  return runtime.registerComponent(\n    lazy(() => import('./Image')),\n    {\n      type: MakeswiftComponentType.Image,\n      label: 'Image',\n      props: {\n        id: ElementID(),\n        file: Image(),\n        altText: TextInput({ label: 'Alt text' }),\n        link: Link({ label: 'On click' }),\n        width: Width(),\n        aspectRatio: ResponsiveSelect({\n          label: 'Aspect ratio',\n          labelOrientation: 'vertical',\n          options: [\n            { value: 'original', label: 'Original' },\n            { value: '16:9', label: '16:9' },\n            { value: '4:3', label: '4:3' },\n            { value: '1:1', label: '1:1' },\n          ],\n          defaultValue: 'original',\n        }),\n        margin: Margin({ format: Margin.Format.ClassName }),\n        padding: Padding({ format: Padding.Format.ClassName }),\n        border: Border({ format: Border.Format.ClassName }),\n        borderRadius: BorderRadius({ format: BorderRadius.Format.ClassName }),\n        boxShadow: Shadows({ format: Shadows.Format.ClassName }),\n        opacity: ResponsiveOpacity(),\n        priority: Checkbox({ label: 'Priority' }),\n      },\n    },\n  )\n}\n"],"mappings":"AAAA,SAAS,YAAY;AAErB,SAAS,8BAA8B;AACvC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEA,SAAS,kBAAkB,SAA2B;AAC3D,SAAO,QAAQ;AAAA,IACb,KAAK,MAAM,OAAO,SAAS,CAAC;AAAA,IAC5B;AAAA,MACE,MAAM,uBAAuB;AAAA,MAC7B,OAAO;AAAA,MACP,OAAO;AAAA,QACL,IAAI,UAAU;AAAA,QACd,MAAM,MAAM;AAAA,QACZ,SAAS,UAAU,EAAE,OAAO,WAAW,CAAC;AAAA,QACxC,MAAM,KAAK,EAAE,OAAO,WAAW,CAAC;AAAA,QAChC,OAAO,MAAM;AAAA,QACb,aAAa,iBAAiB;AAAA,UAC5B,OAAO;AAAA,UACP,kBAAkB;AAAA,UAClB,SAAS;AAAA,YACP,EAAE,OAAO,YAAY,OAAO,WAAW;AAAA,YACvC,EAAE,OAAO,QAAQ,OAAO,OAAO;AAAA,YAC/B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,YAC7B,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,UAC/B;AAAA,UACA,cAAc;AAAA,QAChB,CAAC;AAAA,QACD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,SAAS,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACrD,QAAQ,OAAO,EAAE,QAAQ,OAAO,OAAO,UAAU,CAAC;AAAA,QAClD,cAAc,aAAa,EAAE,QAAQ,aAAa,OAAO,UAAU,CAAC;AAAA,QACpE,WAAW,QAAQ,EAAE,QAAQ,QAAQ,OAAO,UAAU,CAAC;AAAA,QACvD,SAAS,kBAAkB;AAAA,QAC3B,UAAU,SAAS,EAAE,OAAO,WAAW,CAAC;AAAA,MAC1C;AAAA,IACF;AAAA,EACF;AACF;","names":[]}

package/dist/esm/components/builtin/Navigation/Navigation.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
 import { MobileMenu28 } from "../../icons/MobileMenu28";
 import GutterContainer from "../../shared/GutterContainer";
@@ -10,29 +10,25 @@ import DropDownButton from "./components/DropDownButton";
 import MobileMenu from "./components/MobileMenu";
 import { colorToString } from "../../utils/colorToString";
 import { useResponsiveColor } from "../../hooks";
-import { cx } from "@emotion/css";
 import { useResponsiveStyle, useResponsiveTextStyle } from "../../utils/responsive-style";
-import { useStyle } from "../../../runtimes/react/use-style";
+import { composeStyles, useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const Container = forwardRef(function Container2({ className, width, margin, textStyle, gutter, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "nav",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({ display: "flex", alignItems: "center" }),
-        width,
-        margin,
-        useStyle(useResponsiveTextStyle(textStyle)),
-        useStyle(
-          useResponsiveStyle([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
-            gap: `${gutter2.value}${gutter2.unit}`
-          }))
-        ),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({ display: "flex", alignItems: "center" }),
+    width,
+    margin,
+    useStyle(useResponsiveTextStyle(textStyle)),
+    useStyle(
+      useResponsiveStyle([gutter], ([gutter2 = { value: 0, unit: "px" }]) => ({
+        gap: `${gutter2.value}${gutter2.unit}`
+      }))
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("nav", { ...restOfProps, ref, className: styles.className })
+  ] });
 });
 function LinksContainer({
   className,
@@ -40,29 +36,27 @@ function LinksContainer({
   mobileMenuAnimation,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          display: "flex",
-          alignItems: "center",
-          flexGrow: 1
-        }),
-        useStyle(
-          useResponsiveStyle(
-            [alignment, mobileMenuAnimation],
-            ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
-              display: mobileMenuAnimation2 == null ? "flex" : "none",
-              justifyContent: alignment2
-            })
-          )
-        ),
-        className
+  const styles = composeStyles(
+    useStyle({
+      display: "flex",
+      alignItems: "center",
+      flexGrow: 1
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [alignment, mobileMenuAnimation],
+        ([alignment2 = "flex-end", mobileMenuAnimation2]) => ({
+          display: mobileMenuAnimation2 == null ? "flex" : "none",
+          justifyContent: alignment2
+        })
       )
-    }
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, className: styles.className })
+  ] });
 }
 function OpenIconContainer({
   className,
@@ -71,35 +65,33 @@ function OpenIconContainer({
   color,
   ...restOfProps
 }) {
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          display: "none",
-          flexGrow: 1,
-          alignItems: "center",
-          background: "none",
-          outline: 0,
-          border: 0,
-          padding: 0,
-          fill: "currentcolor"
-        }),
-        useStyle(
-          useResponsiveStyle(
-            [mobileMenuAnimation, alignment, color],
-            ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
-              display: mobileMenuAnimation2 == null ? "none" : "flex",
-              justifyContent: alignment2,
-              color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
-            })
-          )
-        ),
-        className
+  const styles = composeStyles(
+    useStyle({
+      display: "none",
+      flexGrow: 1,
+      alignItems: "center",
+      background: "none",
+      outline: 0,
+      border: 0,
+      padding: 0,
+      fill: "currentcolor"
+    }),
+    useStyle(
+      useResponsiveStyle(
+        [mobileMenuAnimation, alignment, color],
+        ([mobileMenuAnimation2, alignment2 = "flex-end", color2]) => ({
+          display: mobileMenuAnimation2 == null ? "none" : "flex",
+          justifyContent: alignment2,
+          color: color2 == null ? "rgba(161, 168, 194, 0.5)" : colorToString(color2)
+        })
       )
-    }
+    ),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx("button", { ...restOfProps, className: styles.className })
+  ] });
 }
 function NavigationButton(props) {
   const { textColor, color, ...restOfProps } = props;

package/dist/esm/components/builtin/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Navigation/Navigation.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useState, ReactNode } from 'react'\n\nimport { MobileMenu28 } from '../../icons/MobileMenu28'\n\nimport GutterContainer from '../../shared/GutterContainer'\nimport Image from '../Image'\nimport Button from '../Button'\nimport LinksPlaceholder from './components/LinksPlaceholder'\nimport DropDownButton from './components/DropDownButton'\nimport MobileMenu from './components/MobileMenu'\nimport {\n  type ImageData,\n  type LinkData,\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveValue,\n  type ResponsiveSelectValue,\n} from '@makeswift/prop-controllers'\n\nimport { ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveColor } from '../../hooks'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../utils/responsive-style'\nimport { useStyle } from '../../../runtimes/react/use-style'\n\ntype Props = {\n  id?: string\n  links?: NavigationLinksData\n  linkTextStyle?: ResponsiveTextStyleData\n  showLogo?: boolean\n  logoFile?: ImageData\n  logoWidth?: ResponsiveLengthData\n  logoAltText?: string\n  logoLink?: LinkData\n  alignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gutter?: ResponsiveGapData\n  mobileMenuAnimation?: ResponsiveSelectValue<'coverRight' | 'coverLeft'>\n  mobileMenuOpenIconColor?: ResponsiveColor | null\n  mobileMenuCloseIconColor?: ResponsiveColor | null\n  mobileMenuBackgroundColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\n  textStyle: Props['linkTextStyle']\n  gutter: Props['gutter']\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'nav'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  { className, width, margin, textStyle, gutter, ...restOfProps }: ContainerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  return (\n    <nav\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', alignItems: 'center' }),\n        width,\n        margin,\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n            gap: `${gutter.value}${gutter.unit}`,\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n})\n\ntype LinksContainerBaseProps = {\n  alignment: Props['alignment']\n  mobileMenuAnimation: Props['mobileMenuAnimation']\n}\n\ntype LinksContainerProps = LinksContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof LinksContainerBaseProps>\n\nfunction LinksContainer({\n  className,\n  alignment,\n  mobileMenuAnimation,\n  ...restOfProps\n}: LinksContainerProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'flex',\n          alignItems: 'center',\n          flexGrow: 1,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [alignment, mobileMenuAnimation] as const,\n            ([alignment = 'flex-end', mobileMenuAnimation]) => ({\n              display: mobileMenuAnimation == null ? 'flex' : 'none',\n              justifyContent: alignment,\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype OpenIconContainerBaseProps = {\n  mobileMenuAnimation: Props['mobileMenuAnimation']\n  alignment: Props['alignment']\n  color: ResponsiveValue<Color> | null | undefined\n}\n\ntype OpenIconContainerProps = OpenIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof OpenIconContainerBaseProps>\n\nfunction OpenIconContainer({\n  className,\n  mobileMenuAnimation,\n  alignment,\n  color,\n  ...restOfProps\n}: OpenIconContainerProps) {\n  return (\n    <button\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'none',\n          flexGrow: 1,\n          alignItems: 'center',\n          background: 'none',\n          outline: 0,\n          border: 0,\n          padding: 0,\n          fill: 'currentcolor',\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [mobileMenuAnimation, alignment, color] as const,\n            ([mobileMenuAnimation, alignment = 'flex-end', color]) => ({\n              display: mobileMenuAnimation == null ? 'none' : 'flex',\n              justifyContent: alignment,\n              color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction NavigationButton(props: NavigationButtonProps): ReactNode {\n  const { textColor, color, ...restOfProps } = props\n\n  return (\n    <Button\n      {...restOfProps}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\nconst placeholder = {\n  src: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\",\n  dimensions: { width: 93, height: 36 },\n}\n\nconst Navigation = forwardRef<HTMLDivElement, Props>(function Navigation(\n  {\n    id,\n    links = [],\n    linkTextStyle,\n    showLogo,\n    logoFile,\n    logoWidth,\n    logoAltText,\n    logoLink,\n    alignment,\n    gutter,\n    mobileMenuAnimation,\n    mobileMenuOpenIconColor,\n    mobileMenuCloseIconColor,\n    mobileMenuBackgroundColor,\n    width,\n    margin,\n  },\n  ref,\n) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      textStyle={linkTextStyle}\n      gutter={gutter}\n    >\n      {showLogo === true && (\n        <Image\n          altText={logoAltText}\n          file={logoFile}\n          link={logoLink}\n          placeholder={placeholder}\n          width={logoWidth}\n        />\n      )}\n      <div style={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>\n        <LinksContainer alignment={alignment} mobileMenuAnimation={mobileMenuAnimation}>\n          {links.length > 0 ? (\n            links.map((link, i) => (\n              <GutterContainer\n                key={link.id}\n                gutter={gutter}\n                first={i === 0}\n                last={i === links.length - 1}\n              >\n                {link.type === 'button' && (\n                  <NavigationButton {...link.payload}>{link.payload.label}</NavigationButton>\n                )}\n                {link.type === 'dropdown' && <DropDownButton {...link.payload} />}\n              </GutterContainer>\n            ))\n          ) : (\n            <LinksPlaceholder gutter={gutter} />\n          )}\n        </LinksContainer>\n        <OpenIconContainer\n          alignment={alignment}\n          color={mobileMenuOpenIconColor}\n          mobileMenuAnimation={mobileMenuAnimation}\n          onClick={() => setIsOpen(true)}\n        >\n          <MobileMenu28 />\n        </OpenIconContainer>\n        <MobileMenu\n          animation={mobileMenuAnimation}\n          backgroundColor={mobileMenuBackgroundColor}\n          closeIconColor={mobileMenuCloseIconColor}\n          links={links}\n          onClose={() => setIsOpen(false)}\n          open={isOpen}\n        />\n      </div>\n    </Container>\n  )\n})\n\nexport default Navigation\n"],"mappings":"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","names":["Container","gutter","alignment","mobileMenuAnimation","color","Navigation"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Navigation/Navigation.tsx"],"sourcesContent":["'use client'\n\nimport { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useState, ReactNode } from 'react'\n\nimport { MobileMenu28 } from '../../icons/MobileMenu28'\n\nimport GutterContainer from '../../shared/GutterContainer'\nimport Image from '../Image'\nimport Button from '../Button'\nimport LinksPlaceholder from './components/LinksPlaceholder'\nimport DropDownButton from './components/DropDownButton'\nimport MobileMenu from './components/MobileMenu'\nimport {\n  type ImageData,\n  type LinkData,\n  type NavigationButtonData,\n  type NavigationLinksData,\n  type ResponsiveGapData,\n  type ResponsiveLengthData,\n  type ResponsiveIconRadioGroupValue,\n  type ResponsiveTextStyleData,\n  type ResponsiveValue,\n  type ResponsiveSelectValue,\n} from '@makeswift/prop-controllers'\n\nimport { ColorValue as Color, type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { useResponsiveColor } from '../../hooks'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../utils/responsive-style'\nimport { composeStyles, useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  id?: string\n  links?: NavigationLinksData\n  linkTextStyle?: ResponsiveTextStyleData\n  showLogo?: boolean\n  logoFile?: ImageData\n  logoWidth?: ResponsiveLengthData\n  logoAltText?: string\n  logoLink?: LinkData\n  alignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gutter?: ResponsiveGapData\n  mobileMenuAnimation?: ResponsiveSelectValue<'coverRight' | 'coverLeft'>\n  mobileMenuOpenIconColor?: ResponsiveColor | null\n  mobileMenuCloseIconColor?: ResponsiveColor | null\n  mobileMenuBackgroundColor?: ResponsiveColor | null\n  width?: string\n  margin?: string\n}\n\ntype ContainerBaseProps = {\n  width?: string\n  margin?: string\n  textStyle: Props['linkTextStyle']\n  gutter: Props['gutter']\n}\n\ntype ContainerProps = ContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'nav'>, keyof ContainerBaseProps>\n\nconst Container = forwardRef(function Container(\n  { className, width, margin, textStyle, gutter, ...restOfProps }: ContainerProps,\n  ref: ForwardedRef<HTMLElement>,\n) {\n  const styles = composeStyles(\n    useStyle({ display: 'flex', alignItems: 'center' }),\n    width,\n    margin,\n    useStyle(useResponsiveTextStyle(textStyle)),\n    useStyle(\n      useResponsiveStyle([gutter] as const, ([gutter = { value: 0, unit: 'px' }]) => ({\n        gap: `${gutter.value}${gutter.unit}`,\n      })),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <nav {...restOfProps} ref={ref} className={styles.className} />\n    </>\n  )\n})\n\ntype LinksContainerBaseProps = {\n  alignment: Props['alignment']\n  mobileMenuAnimation: Props['mobileMenuAnimation']\n}\n\ntype LinksContainerProps = LinksContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof LinksContainerBaseProps>\n\nfunction LinksContainer({\n  className,\n  alignment,\n  mobileMenuAnimation,\n  ...restOfProps\n}: LinksContainerProps) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [alignment, mobileMenuAnimation] as const,\n        ([alignment = 'flex-end', mobileMenuAnimation]) => ({\n          display: mobileMenuAnimation == null ? 'flex' : 'none',\n          justifyContent: alignment,\n        }),\n      ),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <div {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype OpenIconContainerBaseProps = {\n  mobileMenuAnimation: Props['mobileMenuAnimation']\n  alignment: Props['alignment']\n  color: ResponsiveValue<Color> | null | undefined\n}\n\ntype OpenIconContainerProps = OpenIconContainerBaseProps &\n  Omit<ComponentPropsWithoutRef<'button'>, keyof OpenIconContainerBaseProps>\n\nfunction OpenIconContainer({\n  className,\n  mobileMenuAnimation,\n  alignment,\n  color,\n  ...restOfProps\n}: OpenIconContainerProps) {\n  const styles = composeStyles(\n    useStyle({\n      display: 'none',\n      flexGrow: 1,\n      alignItems: 'center',\n      background: 'none',\n      outline: 0,\n      border: 0,\n      padding: 0,\n      fill: 'currentcolor',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [mobileMenuAnimation, alignment, color] as const,\n        ([mobileMenuAnimation, alignment = 'flex-end', color]) => ({\n          display: mobileMenuAnimation == null ? 'none' : 'flex',\n          justifyContent: alignment,\n          color: color == null ? 'rgba(161, 168, 194, 0.5)' : colorToString(color),\n        }),\n      ),\n    ),\n    className,\n  )\n  return (\n    <>\n      {styles.styleElements}\n      <button {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype NavigationButtonProps = NavigationButtonData['payload'] &\n  Omit<ComponentPropsWithoutRef<typeof Button>, 'color' | 'textColor'>\n\nfunction NavigationButton(props: NavigationButtonProps): ReactNode {\n  const { textColor, color, ...restOfProps } = props\n\n  return (\n    <Button\n      {...restOfProps}\n      textColor={useResponsiveColor(textColor)}\n      color={useResponsiveColor(color)}\n    />\n  )\n}\n\nconst placeholder = {\n  src: \"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='93.12' height='36' viewBox='0 0 93.12 36'%3E%3Cg id='Layer_2' data-name='Layer 2'%3E%3Cg id='Layer_1-2' data-name='Layer 1'%3E%3Cpath d='M18,0A18,18,0,1,1,0,18,18,18,0,0,1,18,0ZM49.36,21.94h6.36V24H46.8V10h2.56Zm9.06.72a4.88,4.88,0,0,1-1.64-3.72,5,5,0,0,1,1.64-3.74,5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18l-.26.26a5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Zm10,10.68,1-1.92a5.28,5.28,0,0,0,3.3,1.22,3.6,3.6,0,0,0,2.32-.72,2.73,2.73,0,0,0,.9-2.26V22.5a3.61,3.61,0,0,1-1.45,1.26,4.35,4.35,0,0,1-2,.46,4.57,4.57,0,0,1-3.58-1.54A5.48,5.48,0,0,1,69.2,18.9a5.42,5.42,0,0,1,1.36-3.74,4.64,4.64,0,0,1,3.62-1.5,4,4,0,0,1,3.44,1.72v-1.5h2.46v9a6.13,6.13,0,0,1-1.43,4.46,5.27,5.27,0,0,1-4,1.44,7.09,7.09,0,0,1-4.53-1.42Zm1.54-8.44a3.4,3.4,0,0,0,.82,2.3,2.72,2.72,0,0,0,2.17.94,3.13,3.13,0,0,0,1.21-.22,2.89,2.89,0,0,0,1-.62,3.08,3.08,0,0,0,.63-1,3.62,3.62,0,0,0,.21-1.3,4,4,0,0,0-.23-1.33,3.3,3.3,0,0,0-.63-1.05,2.74,2.74,0,0,0-1-.68,3.35,3.35,0,0,0-1.25-.24,2.92,2.92,0,0,0-1.2.24,2.58,2.58,0,0,0-.93.67,3,3,0,0,0-.59,1,3.89,3.89,0,0,0-.19,1.31ZM83.8,22.66a4.88,4.88,0,0,1-1.64-3.72A5,5,0,0,1,83.8,15.2a5.57,5.57,0,0,1,7.7,0,5.09,5.09,0,0,1,.26,7.18,3.19,3.19,0,0,1-.26.26,5.56,5.56,0,0,1-7.7,0Zm1.68-6a3.39,3.39,0,0,0,0,4.52,3,3,0,0,0,4.24.08l.08-.08a3.39,3.39,0,0,0,0-4.52,3,3,0,0,0-4.24-.08Z' fill='%23a1a8c2' opacity='0.4' style='isolation: isolate'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\",\n  dimensions: { width: 93, height: 36 },\n}\n\nconst Navigation = forwardRef<HTMLDivElement, Props>(function Navigation(\n  {\n    id,\n    links = [],\n    linkTextStyle,\n    showLogo,\n    logoFile,\n    logoWidth,\n    logoAltText,\n    logoLink,\n    alignment,\n    gutter,\n    mobileMenuAnimation,\n    mobileMenuOpenIconColor,\n    mobileMenuCloseIconColor,\n    mobileMenuBackgroundColor,\n    width,\n    margin,\n  },\n  ref,\n) {\n  const [isOpen, setIsOpen] = useState(false)\n\n  return (\n    <Container\n      ref={ref}\n      id={id}\n      width={width}\n      margin={margin}\n      textStyle={linkTextStyle}\n      gutter={gutter}\n    >\n      {showLogo === true && (\n        <Image\n          altText={logoAltText}\n          file={logoFile}\n          link={logoLink}\n          placeholder={placeholder}\n          width={logoWidth}\n        />\n      )}\n      <div style={{ display: 'flex', flexGrow: 1, justifyContent: 'flex-end' }}>\n        <LinksContainer alignment={alignment} mobileMenuAnimation={mobileMenuAnimation}>\n          {links.length > 0 ? (\n            links.map((link, i) => (\n              <GutterContainer\n                key={link.id}\n                gutter={gutter}\n                first={i === 0}\n                last={i === links.length - 1}\n              >\n                {link.type === 'button' && (\n                  <NavigationButton {...link.payload}>{link.payload.label}</NavigationButton>\n                )}\n                {link.type === 'dropdown' && <DropDownButton {...link.payload} />}\n              </GutterContainer>\n            ))\n          ) : (\n            <LinksPlaceholder gutter={gutter} />\n          )}\n        </LinksContainer>\n        <OpenIconContainer\n          alignment={alignment}\n          color={mobileMenuOpenIconColor}\n          mobileMenuAnimation={mobileMenuAnimation}\n          onClick={() => setIsOpen(true)}\n        >\n          <MobileMenu28 />\n        </OpenIconContainer>\n        <MobileMenu\n          animation={mobileMenuAnimation}\n          backgroundColor={mobileMenuBackgroundColor}\n          closeIconColor={mobileMenuCloseIconColor}\n          links={links}\n          onClose={() => setIsOpen(false)}\n          open={isOpen}\n        />\n      </div>\n    </Container>\n  )\n})\n\nexport default Navigation\n"],"mappings":";AA6EI,mBAEE,KAFF;AA3EJ,SAAiD,YAAY,gBAA2B;AAExF,SAAS,oBAAoB;AAE7B,OAAO,qBAAqB;AAC5B,OAAO,WAAW;AAClB,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,oBAAoB;AAC3B,OAAO,gBAAgB;AAevB,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B;AACnC,SAAS,oBAAoB,8BAA8B;AAC3D,SAAS,eAAe,gBAAgB;AA+BxC,MAAM,YAAY,WAAW,SAASA,WACpC,EAAE,WAAW,OAAO,QAAQ,WAAW,QAAQ,GAAG,YAAY,GAC9D,KACA;AACA,QAAM,SAAS;AAAA,IACb,SAAS,EAAE,SAAS,QAAQ,YAAY,SAAS,CAAC;AAAA,IAClD;AAAA,IACA;AAAA,IACA,SAAS,uBAAuB,SAAS,CAAC;AAAA,IAC1C;AAAA,MACE,mBAAmB,CAAC,MAAM,GAAY,CAAC,CAACC,UAAS,EAAE,OAAO,GAAG,MAAM,KAAK,CAAC,OAAO;AAAA,QAC9E,KAAK,GAAGA,QAAO,KAAK,GAAGA,QAAO,IAAI;AAAA,MACpC,EAAE;AAAA,IACJ;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,KAAU,WAAW,OAAO,WAAW;AAAA,KAC/D;AAEJ,CAAC;AAUD,SAAS,eAAe;AAAA,EACtB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,UAAU;AAAA,IACZ,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,WAAW,mBAAmB;AAAA,QAC/B,CAAC,CAACC,aAAY,YAAYC,oBAAmB,OAAO;AAAA,UAClD,SAASA,wBAAuB,OAAO,SAAS;AAAA,UAChD,gBAAgBD;AAAA,QAClB;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,SAAK,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACrD;AAEJ;AAWA,SAAS,kBAAkB;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS;AAAA,IACb,SAAS;AAAA,MACP,SAAS;AAAA,MACT,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,MAAM;AAAA,IACR,CAAC;AAAA,IACD;AAAA,MACE;AAAA,QACE,CAAC,qBAAqB,WAAW,KAAK;AAAA,QACtC,CAAC,CAACC,sBAAqBD,aAAY,YAAYE,MAAK,OAAO;AAAA,UACzD,SAASD,wBAAuB,OAAO,SAAS;AAAA,UAChD,gBAAgBD;AAAA,UAChB,OAAOE,UAAS,OAAO,6BAA6B,cAAcA,MAAK;AAAA,QACzE;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,EACF;AACA,SACE,iCACG;AAAA,WAAO;AAAA,IACR,oBAAC,YAAQ,GAAG,aAAa,WAAW,OAAO,WAAW;AAAA,KACxD;AAEJ;AAKA,SAAS,iBAAiB,OAAyC;AACjE,QAAM,EAAE,WAAW,OAAO,GAAG,YAAY,IAAI;AAE7C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,mBAAmB,SAAS;AAAA,MACvC,OAAO,mBAAmB,KAAK;AAAA;AAAA,EACjC;AAEJ;AAEA,MAAM,cAAc;AAAA,EAClB,KAAK;AAAA,EACL,YAAY,EAAE,OAAO,IAAI,QAAQ,GAAG;AACtC;AAEA,MAAM,aAAa,WAAkC,SAASC,YAC5D;AAAA,EACE;AAAA,EACA,QAAQ,CAAC;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GACA,KACA;AACA,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MAEC;AAAA,qBAAa,QACZ;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,MAAM;AAAA,YACN,MAAM;AAAA,YACN;AAAA,YACA,OAAO;AAAA;AAAA,QACT;AAAA,QAEF,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,UAAU,GAAG,gBAAgB,WAAW,GACrE;AAAA,8BAAC,kBAAe,WAAsB,qBACnC,gBAAM,SAAS,IACd,MAAM,IAAI,CAAC,MAAM,MACf;AAAA,YAAC;AAAA;AAAA,cAEC;AAAA,cACA,OAAO,MAAM;AAAA,cACb,MAAM,MAAM,MAAM,SAAS;AAAA,cAE1B;AAAA,qBAAK,SAAS,YACb,oBAAC,oBAAkB,GAAG,KAAK,SAAU,eAAK,QAAQ,OAAM;AAAA,gBAEzD,KAAK,SAAS,cAAc,oBAAC,kBAAgB,GAAG,KAAK,SAAS;AAAA;AAAA;AAAA,YAR1D,KAAK;AAAA,UASZ,CACD,IAED,oBAAC,oBAAiB,QAAgB,GAEtC;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,OAAO;AAAA,cACP;AAAA,cACA,SAAS,MAAM,UAAU,IAAI;AAAA,cAE7B,8BAAC,gBAAa;AAAA;AAAA,UAChB;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,WAAW;AAAA,cACX,iBAAiB;AAAA,cACjB,gBAAgB;AAAA,cAChB;AAAA,cACA,SAAS,MAAM,UAAU,KAAK;AAAA,cAC9B,MAAM;AAAA;AAAA,UACR;AAAA,WACF;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,IAAO,qBAAQ;","names":["Container","gutter","alignment","mobileMenuAnimation","color","Navigation"]}

package/dist/esm/components/builtin/Navigation/components/DropDownButton/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import {
   forwardRef,
@@ -14,114 +14,108 @@ import { useResponsiveColor } from "../../../../hooks";
 import { Link } from "../../../../shared/Link";
 import Button from "../../../Button";
 import { useIsomorphicLayoutEffect } from "../../../../hooks/useIsomorphicLayoutEffect";
-import { cx, keyframes } from "@emotion/css";
-import { useStyle } from "../../../../../runtimes/react/use-style";
 import { useResponsiveStyle, useResponsiveTextStyle } from "../../../../utils/responsive-style";
+import { useKeyframes } from "../../../../../runtimes/react/css-runtime/hooks/use-keyframes";
+import { composeStyles, useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
+import clsx from "clsx";
 const DROP_DOWN_MENU_WIDTH = 200;
 const DROP_DOWN_MENU_CLASS_NAME = "drop-down-menu";
 function DropDownMenu({ className, position, ...restOfProps }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      className: cx(
-        DROP_DOWN_MENU_CLASS_NAME,
-        useStyle({
-          position: "absolute",
-          top: "100%",
-          left: position === "left" ? 0 : "auto",
-          right: position === "right" ? 0 : "auto",
-          background: "#fff",
-          margin: 0,
-          padding: "8px 0",
-          borderRadius: 4,
-          boxShadow: "0 3px 10px rgba(0, 0, 0, 0.15)",
-          width: DROP_DOWN_MENU_WIDTH,
-          zIndex: 99,
-          listStyle: "none",
-          overflow: "hidden",
-          transformOrigin: "50% 0",
-          willChange: "transform, opacity",
-          transformStyle: "preserve-3d",
-          display: "none"
-        }),
-        className
-      )
-    }
-  );
+  const { className: dropDownMenuStaticStylesClassName, styleElement: dropdownMenuStylesElement } = useStyle({
+    position: "absolute",
+    top: "100%",
+    left: position === "left" ? 0 : "auto",
+    right: position === "right" ? 0 : "auto",
+    background: "#fff",
+    margin: 0,
+    padding: "8px 0",
+    borderRadius: 4,
+    boxShadow: "0 3px 10px rgba(0, 0, 0, 0.15)",
+    width: DROP_DOWN_MENU_WIDTH,
+    zIndex: 99,
+    listStyle: "none",
+    overflow: "hidden",
+    transformOrigin: "50% 0",
+    willChange: "transform, opacity",
+    transformStyle: "preserve-3d",
+    display: "none"
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dropdownMenuStylesElement,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        ...restOfProps,
+        className: clsx(DROP_DOWN_MENU_CLASS_NAME, dropDownMenuStaticStylesClassName, className)
+      }
+    )
+  ] });
 }
-const dropIn = keyframes`
-  0% {
-      opacity: 0;
-      transform: rotateX(-20deg);
-  }
-  100% {
-      opacity: 1;
-      transform: none;
-  }
-`;
 const DropDownContainer = forwardRef(function DropDownContainer2({ className, ...restOfProps }, ref) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ...restOfProps,
-      ref,
-      className: cx(
-        useStyle({
-          position: "relative",
-          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
-            display: "block",
-            animation: `${dropIn} 0.25s`
-          }
-        }),
-        className
-      )
+  const { keyframesName: dropInKeyframesName, styleElement: dropInKeyframeStyleElement } = useKeyframes(`
+    0% {
+        opacity: 0;
+        transform: rotateX(-20deg);
     }
-  );
+    100% {
+        opacity: 1;
+        transform: none;
+    }
+  `);
+  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({
+    position: "relative",
+    [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {
+      display: "block",
+      animation: `${dropInKeyframesName} 0.25s`
+    }
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    dropInKeyframeStyleElement,
+    baseStyleElement,
+    /* @__PURE__ */ jsx("div", { ...restOfProps, ref, className: clsx(baseClassName, className) })
+  ] });
 });
 function DropDownItem({ className, color, textStyle, ...restOfProps }) {
   const colorData = useResponsiveColor(color);
-  return /* @__PURE__ */ jsx(
-    Link,
-    {
-      ...restOfProps,
-      className: cx(
-        useStyle({
-          display: "block",
-          textDecoration: "none",
-          lineHeight: 1.4,
-          padding: "8px 16px",
-          color: "black",
-          backgroundColor: "transparent",
-          transition: "background-color 0.2s"
-        }),
-        useStyle(useResponsiveTextStyle(textStyle)),
-        useStyle(
-          useResponsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
-            const fontSize = textStyle2.fontSize || { value: 14, unit: "px" };
-            const fontWeight = textStyle2.fontWeight == null ? "normal" : textStyle2.fontWeight;
-            const fontStyle = textStyle2.fontStyle || [];
-            const letterSpacing = textStyle2.letterSpacing == null ? null : textStyle2.letterSpacing;
-            const textTransform = textStyle2.textTransform || [];
-            return {
-              color: color2 == null ? "black" : colorToString(color2),
-              fontSize: `${fontSize.value}${fontSize.unit}`,
-              fontWeight,
-              fontStyle: fontStyle.includes("italic") ? "italic" : "normal",
-              letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
-              textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
-            };
-          })
-        ),
-        useStyle({
-          "&:hover": {
-            backgroundColor: "rgba(0, 0, 0, 0.04)"
-          }
-        }),
-        className
-      )
-    }
+  const styles = composeStyles(
+    useStyle({
+      display: "block",
+      textDecoration: "none",
+      lineHeight: 1.4,
+      padding: "8px 16px",
+      color: "black",
+      backgroundColor: "transparent",
+      transition: "background-color 0.2s"
+    }),
+    useStyle(useResponsiveTextStyle(textStyle)),
+    useStyle(
+      useResponsiveStyle([colorData, textStyle], ([color2, textStyle2 = {}]) => {
+        const fontSize = textStyle2.fontSize || { value: 14, unit: "px" };
+        const fontWeight = textStyle2.fontWeight == null ? "normal" : textStyle2.fontWeight;
+        const fontStyle = textStyle2.fontStyle || [];
+        const letterSpacing = textStyle2.letterSpacing == null ? null : textStyle2.letterSpacing;
+        const textTransform = textStyle2.textTransform || [];
+        return {
+          color: color2 == null ? "black" : colorToString(color2),
+          fontSize: `${fontSize.value}${fontSize.unit}`,
+          fontWeight,
+          fontStyle: fontStyle.includes("italic") ? "italic" : "normal",
+          letterSpacing: letterSpacing == null ? "normal" : `${letterSpacing}px`,
+          textTransform: textTransform.includes("uppercase") ? "uppercase" : "none"
+        };
+      })
+    ),
+    useStyle({
+      "&:hover": {
+        backgroundColor: "rgba(0, 0, 0, 0.04)"
+      }
+    }),
+    className
   );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styles.styleElements,
+    /* @__PURE__ */ jsx(Link, { ...restOfProps, className: styles.className })
+  ] });
 }
 function DropDownButton({
   label,

package/dist/esm/components/builtin/Navigation/components/DropDownButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  useRef,\n  useState,\n  ReactNode,\n} from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { cx, keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        DROP_DOWN_MENU_CLASS_NAME,\n        useStyle({\n          position: 'absolute',\n          top: '100%',\n          left: position === 'left' ? 0 : 'auto',\n          right: position === 'right' ? 0 : 'auto',\n          background: '#fff',\n          margin: 0,\n          padding: '8px 0',\n          borderRadius: 4,\n          boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n          width: DROP_DOWN_MENU_WIDTH,\n          zIndex: 99,\n          listStyle: 'none',\n          overflow: 'hidden',\n          transformOrigin: '50% 0',\n          willChange: 'transform, opacity',\n          transformStyle: 'preserve-3d',\n          display: 'none',\n        }),\n        className,\n      )}\n    />\n  )\n}\n\nconst dropIn = keyframes`\n  0% {\n      opacity: 0;\n      transform: rotateX(-20deg);\n  }\n  100% {\n      opacity: 1;\n      transform: none;\n  }\n`\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  return (\n    <div\n      {...restOfProps}\n      ref={ref}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n            display: 'block',\n            animation: `${dropIn} 0.25s`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          display: 'block',\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n          backgroundColor: 'transparent',\n          transition: 'background-color 0.2s',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n            const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n            const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n            const fontStyle = textStyle.fontStyle || []\n            const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n            const textTransform = textStyle.textTransform || []\n\n            return {\n              color: color == null ? 'black' : colorToString(color),\n              fontSize: `${fontSize.value}${fontSize.unit}`,\n              fontWeight,\n              fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n              letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n              textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n            }\n          }),\n        ),\n        useStyle({\n          '&:hover': {\n            backgroundColor: 'rgba(0, 0, 0, 0.04)',\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): ReactNode {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["DropDownContainer","color","textStyle"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ForwardedRef,\n  forwardRef,\n  useRef,\n  useState,\n  ReactNode,\n} from 'react'\n\nimport { CaretDown8 } from '../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../icons/ChevronDown8'\nimport { colorToString } from '../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../hooks'\n\nimport { Link } from '../../../../shared/Link'\nimport Button from '../../../Button'\nimport { useIsomorphicLayoutEffect } from '../../../../hooks/useIsomorphicLayoutEffect'\nimport { useResponsiveStyle, useResponsiveTextStyle } from '../../../../utils/responsive-style'\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\nimport { useKeyframes } from '../../../../../runtimes/react/css-runtime/hooks/use-keyframes'\nimport { composeStyles, useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\nimport clsx from 'clsx'\n\nconst DROP_DOWN_MENU_WIDTH = 200\n\ntype Position = 'left' | 'right'\n\nconst DROP_DOWN_MENU_CLASS_NAME = 'drop-down-menu'\n\ntype DropDownMenuBaseProps = {\n  position: Position\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, position, ...restOfProps }: DropDownMenuProps) {\n  const { className: dropDownMenuStaticStylesClassName, styleElement: dropdownMenuStylesElement } =\n    useStyle({\n      position: 'absolute',\n      top: '100%',\n      left: position === 'left' ? 0 : 'auto',\n      right: position === 'right' ? 0 : 'auto',\n      background: '#fff',\n      margin: 0,\n      padding: '8px 0',\n      borderRadius: 4,\n      boxShadow: '0 3px 10px rgba(0, 0, 0, 0.15)',\n      width: DROP_DOWN_MENU_WIDTH,\n      zIndex: 99,\n      listStyle: 'none',\n      overflow: 'hidden',\n      transformOrigin: '50% 0',\n      willChange: 'transform, opacity',\n      transformStyle: 'preserve-3d',\n      display: 'none',\n    })\n  return (\n    <>\n      {dropdownMenuStylesElement}\n      <div\n        {...restOfProps}\n        className={clsx(DROP_DOWN_MENU_CLASS_NAME, dropDownMenuStaticStylesClassName, className)}\n      />\n    </>\n  )\n}\n\ntype DropDownContainerProps = ComponentPropsWithoutRef<'div'>\n\nconst DropDownContainer = forwardRef(function DropDownContainer(\n  { className, ...restOfProps }: DropDownContainerProps,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const { keyframesName: dropInKeyframesName, styleElement: dropInKeyframeStyleElement } =\n    useKeyframes(`\n    0% {\n        opacity: 0;\n        transform: rotateX(-20deg);\n    }\n    100% {\n        opacity: 1;\n        transform: none;\n    }\n  `)\n\n  const { className: baseClassName, styleElement: baseStyleElement } = useStyle({\n    position: 'relative',\n    [`&:hover .${DROP_DOWN_MENU_CLASS_NAME}`]: {\n      display: 'block',\n      animation: `${dropInKeyframesName} 0.25s`,\n    },\n  })\n  return (\n    <>\n      {dropInKeyframeStyleElement}\n      {baseStyleElement}\n      <div {...restOfProps} ref={ref} className={clsx(baseClassName, className)} />\n    </>\n  )\n})\n\ntype BaseDropDownItemProps = {\n  className?: string\n  color?: ResponsiveColorData\n  textStyle?: ResponsiveTextStyleData\n}\n\ntype DropDownItemProps = BaseDropDownItemProps &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseDropDownItemProps>\n\nfunction DropDownItem({ className, color, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  const styles = composeStyles(\n    useStyle({\n      display: 'block',\n      textDecoration: 'none',\n      lineHeight: 1.4,\n      padding: '8px 16px',\n      color: 'black',\n      backgroundColor: 'transparent',\n      transition: 'background-color 0.2s',\n    }),\n    useStyle(useResponsiveTextStyle(textStyle)),\n    useStyle(\n      useResponsiveStyle([colorData, textStyle] as const, ([color, textStyle = {}]) => {\n        const fontSize = textStyle.fontSize || { value: 14, unit: 'px' }\n        const fontWeight = textStyle.fontWeight == null ? 'normal' : textStyle.fontWeight\n        const fontStyle = textStyle.fontStyle || []\n        const letterSpacing = textStyle.letterSpacing == null ? null : textStyle.letterSpacing\n        const textTransform = textStyle.textTransform || []\n\n        return {\n          color: color == null ? 'black' : colorToString(color),\n          fontSize: `${fontSize.value}${fontSize.unit}`,\n          fontWeight,\n          fontStyle: fontStyle.includes('italic') ? 'italic' : 'normal',\n          letterSpacing: letterSpacing == null ? 'normal' : `${letterSpacing}px`,\n          textTransform: textTransform.includes('uppercase') ? 'uppercase' : 'none',\n        }\n      }),\n    ),\n    useStyle({\n      '&:hover': {\n        backgroundColor: 'rgba(0, 0, 0, 0.04)',\n      },\n    }),\n    className,\n  )\n\n  return (\n    <>\n      {styles.styleElements}\n      <Link {...restOfProps} className={styles.className} />\n    </>\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  caret?: 'caret' | 'plus' | 'arrow-down' | 'chevron-down'\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function DropDownButton({\n  label,\n  caret = 'caret',\n  links = [],\n  textColor,\n  color,\n  ...restOfProps\n}: Props): ReactNode {\n  const container = useRef<HTMLDivElement>(null)\n  const [position, setPosition] = useState<Position>('left')\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      container.current &&\n      container.current.ownerDocument.defaultView!.innerWidth <\n        container.current.offsetLeft + DROP_DOWN_MENU_WIDTH\n    ) {\n      setPosition('right')\n    } else {\n      setPosition('left')\n    }\n  }, [setPosition])\n\n  return (\n    <DropDownContainer ref={container}>\n      <Button\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            {caret === 'caret' && <CaretDown8 />}\n            {caret === 'plus' && <Plus8 />}\n            {caret === 'arrow-down' && <ArrowDown8 />}\n            {caret === 'chevron-down' && <ChevronDown8 />}\n          </span>\n        </div>\n      </Button>\n      <DropDownMenu position={position}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </DropDownContainer>\n  )\n}\n"],"mappings":"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","names":["DropDownContainer","color","textStyle"]}

package/dist/esm/components/builtin/Navigation/components/LinksPlaceholder/index.js

@@ -1,19 +1,18 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useStyle } from "../../../../../runtimes/react/use-style";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import GutterContainer from "../../../../shared/GutterContainer";
+import { useStyle } from "../../../../../runtimes/react/css-runtime/hooks/use-style";
 function PlaceholderLink({ width, button }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: useStyle({
-        width,
-        height: button === true ? 32 : 8,
-        backgroundColor: "#a1a8c2",
-        borderRadius: button === true ? 6 : 2,
-        opacity: 0.4
-      })
-    }
-  );
+  const { className, styleElement } = useStyle({
+    width,
+    height: button === true ? 32 : 8,
+    backgroundColor: "#a1a8c2",
+    borderRadius: button === true ? 6 : 2,
+    opacity: 0.4
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    styleElement,
+    /* @__PURE__ */ jsx("div", { className })
+  ] });
 }
 const links = [{ width: 50 }, { width: 70 }, { width: 60 }, { width: 80, button: true }];
 function LinksPlaceholder({ gutter }) {

package/dist/esm/components/builtin/Navigation/components/LinksPlaceholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/LinksPlaceholder/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { ResponsiveLengthData } from '@makeswift/prop-controllers'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport GutterContainer from '../../../../shared/GutterContainer'\n\ntype PlaceholderLinkProps = {\n  width: number\n  button?: boolean\n}\n\nfunction PlaceholderLink({ width, button }: PlaceholderLinkProps) {\n  return (\n    <div\n      className={useStyle({\n        width,\n        height: button === true ? 32 : 8,\n        backgroundColor: '#a1a8c2',\n        borderRadius: button === true ? 6 : 2,\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = { gutter?: ResponsiveLengthData }\n\nconst links = [{ width: 50 }, { width: 70 }, { width: 60 }, { width: 80, button: true }]\n\nexport default function LinksPlaceholder({ gutter }: Props): ReactNode {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer key={i} gutter={gutter} first={i === 0} last={i === links.length - 1}>\n          <PlaceholderLink {...link} />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n"],"mappings":"AAYI,SAkBA,UAlBA;AAVJ,SAAS,gBAAgB;AACzB,OAAO,qBAAqB;AAO5B,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,SAAS;AAAA,QAClB;AAAA,QACA,QAAQ,WAAW,OAAO,KAAK;AAAA,QAC/B,iBAAiB;AAAA,QACjB,cAAc,WAAW,OAAO,IAAI;AAAA,QACpC,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAIA,MAAM,QAAQ,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,IAAI,QAAQ,KAAK,CAAC;AAExE,SAAR,iBAAkC,EAAE,OAAO,GAAqB;AACrE,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,mBAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,8BAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/LinksPlaceholder/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { ResponsiveLengthData } from '@makeswift/prop-controllers'\nimport GutterContainer from '../../../../shared/GutterContainer'\nimport { useStyle } from '../../../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype PlaceholderLinkProps = {\n  width: number\n  button?: boolean\n}\n\nfunction PlaceholderLink({ width, button }: PlaceholderLinkProps) {\n  const { className, styleElement } = useStyle({\n    width,\n    height: button === true ? 32 : 8,\n    backgroundColor: '#a1a8c2',\n    borderRadius: button === true ? 6 : 2,\n    opacity: 0.4,\n  })\n  return (\n    <>\n      {styleElement}\n      <div className={className} />\n    </>\n  )\n}\n\ntype Props = { gutter?: ResponsiveLengthData }\n\nconst links = [{ width: 50 }, { width: 70 }, { width: 60 }, { width: 80, button: true }]\n\nexport default function LinksPlaceholder({ gutter }: Props): ReactNode {\n  return (\n    <>\n      {links.map((link, i) => (\n        <GutterContainer key={i} gutter={gutter} first={i === 0} last={i === links.length - 1}>\n          <PlaceholderLink {...link} />\n        </GutterContainer>\n      ))}\n    </>\n  )\n}\n"],"mappings":"AAmBI,mBAEE,KAFF;AAjBJ,OAAO,qBAAqB;AAC5B,SAAS,gBAAgB;AAOzB,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,QAAM,EAAE,WAAW,aAAa,IAAI,SAAS;AAAA,IAC3C;AAAA,IACA,QAAQ,WAAW,OAAO,KAAK;AAAA,IAC/B,iBAAiB;AAAA,IACjB,cAAc,WAAW,OAAO,IAAI;AAAA,IACpC,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,oBAAC,SAAI,WAAsB;AAAA,KAC7B;AAEJ;AAIA,MAAM,QAAQ,CAAC,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,GAAG,GAAG,EAAE,OAAO,IAAI,QAAQ,KAAK,CAAC;AAExE,SAAR,iBAAkC,EAAE,OAAO,GAAqB;AACrE,SACE,gCACG,gBAAM,IAAI,CAAC,MAAM,MAChB,oBAAC,mBAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,8BAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":[]}