@makeswift/runtime 0.26.2 → 0.26.3-canary.0

package/dist/cjs/api-handler/handlers/manifest.js

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.26.2",
+    version: "0.26.3-canary.0",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/cjs/client/index.js

@@ -212,7 +212,7 @@ Received "${apiKey}" instead.`
       );
     }
     this.graphqlClient = new import_client.GraphQLClient(new URL("graphql", apiOrigin).href, {
-      "makeswift-runtime-version": "0.26.2"
+      "makeswift-runtime-version": "0.26.3-canary.0"
     });
     this.runtime = runtime;
   }
@@ -221,7 +221,7 @@ Received "${apiKey}" instead.`
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.26.2"
+      "makeswift-runtime-version": "0.26.3-canary.0"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);
@@ -668,7 +668,7 @@ Received "${apiKey}" instead.`
       headers: {
         "x-api-key": this.apiKey,
         "makeswift-site-api-key": this.apiKey,
-        "makeswift-runtime-version": "0.26.2",
+        "makeswift-runtime-version": "0.26.3-canary.0",
         "content-type": "application/json"
       },
       body: JSON.stringify({ token }),

package/dist/cjs/components/builtin/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  ElementRef,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<ElementRef<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsEI;AAAA;AAAA;AAAA;AAtEJ,mBAOO;AACP,mBAAwB;AAGxB,2BAA8B;AAC9B,kBAAqB;AAErB,uBAAyB;AACzB,8BAIO;AACP,iBAAmB;AA2BnB,MAAM,aAAS,yBAAW,SAASA,QACjC;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,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,YAAY,MAAM;AAExB,SAEE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,YAAY;AAAA,UACZ,gBAAgB;AAAA,UAChB,WAAW;AAAA,QACb,CAAC;AAAA,YACD,+BAAS,4CAAmB,OAAO,MAAM,CAAC;AAAA,QAC1C;AAAA,YACA;AAAA,cACE;AAAA,YACE,CAAC,SAAS,OAAO,MAAM,WAAW,KAAK;AAAA,YACvC,CAAC;AAAA,cACCC,WAAU;AAAA,cACVC,SAAQ;AAAA,cACRC,QAAO;AAAA,cACPC,aAAY,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,IAAI,GAAG,OAAO,EAAE;AAAA,cAC1EC,SAAQ,EAAE,QAAQ,EAAE,KAAK,GAAG,YAAY,GAAG,WAAW,EAAE,GAAG,OAAO,EAAE;AAAA,YACtE,MAAM;AACJ,oBAAM,WAAW;AAAA,gBACf,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,OAAO,GAAG,EAAEF,KAAI;AAAA,gBAChD,MAAM;AAAA,cACR;AAEA,qBAAO;AAAA,gBACL,WAAO,oCAAcC,UAAS;AAAA,gBAC9B,cAAc,GAAG,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,IAAI,EAAEF,MAAK,CAAC;AAAA,gBAC5D,SAAS,GAAG,EAAE,OAAO,YAAY,QAAQ,aAAa,OAAO,YAAY,EAAEC,KAAI,CAAC;AAAA,gBAChF,UAAU,GAAG,SAAS,KAAK,GAAG,SAAS,IAAI;AAAA,gBAC3C,GAAG;AAAA,kBACD,MAAM;AAAA,oBACJ,gBAAY,oCAAcE,MAAK;AAAA,oBAC/B,QAAQ;AAAA,oBACR,YAAY,CAAC,SAAS,cAAc,UAAU,YAAY,EACvD,IAAI,cAAY,GAAG,QAAQ,oBAAoB,EAC/C,KAAK,IAAI;AAAA,oBAEZ,UAAU;AAAA,sBACR,gBAAY,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,GAAG,EAAE,IAAI;AAAA,oBAChE;AAAA,oBAEA,WAAW;AAAA,sBACT,gBAAY,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI;AAAA,oBACjE;AAAA,kBACF;AAAA,kBACA,SAAS;AAAA,oBACP,YAAY;AAAA,oBACZ,WAAW,uBAAmB,oCAAcA,MAAK,CAAC;AAAA,oBAClD,YAAY,CAAC,SAAS,cAAc,YAAY,EAC7C,IAAI,cAAY,GAAG,QAAQ,oBAAoB,EAC/C,KAAK,IAAI;AAAA,oBAEZ,UAAU;AAAA,sBACR,WAAW,uBAAmB,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAC3D,OAAO,GAAG,EACV,IAAI,CAAC;AAAA,sBACR,WAAO,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,GAAG,EAAE,IAAI;AAAA,oBAC3D;AAAA,oBAEA,WAAW;AAAA,sBACT,WAAW,uBAAmB,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAC3D,OAAO,IAAI,EACX,IAAI,CAAC;AAAA,sBACR,WAAO,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI;AAAA,oBAC5D;AAAA,kBACF;AAAA,kBACA,QAAQ;AAAA,oBACN,gBAAY,oCAAcA,MAAK;AAAA,oBAC/B,WAAW;AAAA,oBACX,YAAY,CAAC,aAAa,YAAY,EACnC,IAAI,cAAY,GAAG,QAAQ,QAAQ,EACnC,KAAK,IAAI;AAAA,oBAEZ,UAAU;AAAA,sBACR,WACE;AAAA,sBACF,WAAW;AAAA,oBACb;AAAA,oBAEA,WAAW;AAAA,sBACT,WACE;AAAA,sBACF,WAAW;AAAA,oBACb;AAAA,kBACF;AAAA,kBACA,OAAO;AAAA,oBACL,YAAY;AAAA,oBACZ,QAAQ;AAAA,oBAER,UAAU;AAAA,sBACR,WAAO,aAAAC,aAAY,oCAAcF,UAAS,CAAC,EAAE,MAAM,GAAG,EAAE,SAAS;AAAA,oBACnE;AAAA,oBAEA,WAAW;AAAA,sBACT,WAAO,aAAAE,aAAY,oCAAcF,UAAS,CAAC,EAAE,MAAM,GAAG,EAAE,SAAS;AAAA,oBACnE;AAAA,kBACF;AAAA,kBACA,QAAQ;AAAA,oBACN,gBAAY,oCAAcC,MAAK;AAAA,oBAC/B,aAAa;AAAA,oBACb,aAAa;AAAA,oBACb,iBAAa,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI;AAAA,oBAChE,WAAW,aAAS,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI,CAAC;AAAA,oBACxE,YAAY,CAAC,aAAa,YAAY,EACnC,IAAI,cAAY,GAAG,QAAQ,OAAO,EAClC,KAAK,IAAI;AAAA,oBAEZ,UAAU;AAAA,sBACR,WAAW;AAAA,sBACX,WAAW,aAAS,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI,CAAC;AAAA,oBAC1E;AAAA,oBAEA,WAAW;AAAA,sBACT,WAAW;AAAA,sBACX,WAAW,WAAO,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,IAAI,EAAE,IAAI,CAAC;AAAA,oBACxE;AAAA,kBACF;AAAA,kBACA,QAAQ;AAAA,oBACN,YAAY;AAAA;AAAA,4BAER,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,QAAQ,IAAI,EAAE,IAAI,CAAC;AAAA,4BACrD,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,GAAG,EAAE,SAAS,IAAI,EAAE,IAAI,CAAC;AAAA;AAAA,oBAEtE,UAAU;AAAA,oBACV,QAAQ;AAAA,oBAER,WAAW;AAAA,sBACT,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,QAAQ;AAAA,sBACR,cAAc;AAAA,sBACd,YAAY;AAAA;AAAA,8BAER,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,QAAQ,GAAG,EAAE,IAAI,CAAC;AAAA,8BACpD,aAAAC,aAAY,oCAAcD,MAAK,CAAC,EAAE,OAAO,GAAG,EAAE,SAAS,IAAI,EAAE,IAAI,CAAC;AAAA;AAAA,sBAEtE,SAAS;AAAA,sBACT,YAAY;AAAA,oBACd;AAAA,oBAEA,UAAU;AAAA,sBACR,WAAW;AAAA,wBACT,SAAS;AAAA,sBACX;AAAA,oBACF;AAAA,oBAEA,WAAW;AAAA,sBACT,WAAW;AAAA,wBACT,SAAS;AAAA,sBACX;AAAA,oBACF;AAAA,kBACF;AAAA,kBACA,QAAQ;AAAA,oBACN,UAAU;AAAA,oBACV,QAAQ;AAAA,oBAER,WAAW;AAAA,sBACT,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,KAAK;AAAA,sBACL,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,MAAM;AAAA,sBACN,QAAQ;AAAA,sBACR,gBAAY,oCAAcA,MAAK;AAAA,sBAC/B,WAAW;AAAA,sBACX,cAAc;AAAA,sBACd,YAAY;AAAA,oBACd;AAAA,oBAEA,iBAAiB;AAAA,sBACf,WAAW;AAAA,oBACb;AAAA,oBAEA,kBAAkB;AAAA,sBAChB,WAAW;AAAA,oBACb;AAAA,kBACF;AAAA,gBACF,EAAEJ,QAAO;AAAA,cACX;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,YACA,+BAAS,gDAAuB,SAAS,CAAC;AAAA,QAC1C;AAAA,MACF;AAAA,MACA;AAAA,MAEC,sBAAY,OAAO,gBAAgB;AAAA;AAAA,EACtC;AAEJ,CAAC;AAED,IAAO,iBAAQ;","names":["Button","variant","shape","size","textColor","color","ColorHelper"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Button/Button.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  Ref,\n  ElementType,\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n} from 'react'\nimport ColorHelper from 'color'\n\nimport { type ResponsiveColor } from '../../utils/types'\nimport { colorToString } from '../../utils/colorToString'\nimport { Link } from '../../shared/Link'\nimport { ButtonVariant } from './contants'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n  useResponsiveWidth,\n} from '../../utils/responsive-style'\nimport { cx } from '@emotion/css'\nimport {\n  type LinkData,\n  type ResponsiveLengthData,\n  type ResponsiveTextStyleData,\n  type ResponsiveSelectValue,\n  type ResponsiveIconRadioGroupValue,\n} from '@makeswift/prop-controllers'\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n  id?: string\n  children?: ReactNode\n  link?: LinkData\n  variant?: ResponsiveSelectValue<ButtonVariant>\n  shape?: ResponsiveIconRadioGroupValue<'pill' | 'rounded' | 'square'>\n  size?: ResponsiveIconRadioGroupValue<'small' | 'medium' | 'large'>\n  color?: ResponsiveColor | null\n  textColor?: ResponsiveColor | null\n  textStyle?: ResponsiveTextStyleData\n  width?: ResponsiveLengthData\n  margin?: string\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<typeof Link>, keyof BaseProps<T>>\n\nconst Button = forwardRef(function Button<T extends ElementType = 'button'>(\n  {\n    as,\n    id,\n    children,\n    link,\n    variant,\n    shape,\n    size,\n    textColor,\n    color,\n    textStyle,\n    width,\n    margin,\n    className,\n    ...restOfProps\n  }: Props<T>,\n  ref: ForwardedRef<Ref<T>>,\n) {\n  const Component = as ?? Link\n\n  return (\n    // @ts-ignore: `ref` prop doesn't match between `Link` and `T`.\n    <Component\n      {...restOfProps}\n      ref={ref}\n      id={id}\n      className={cx(\n        useStyle({\n          display: 'table',\n          border: 0,\n          outline: 0,\n          userSelect: 'none',\n          cursor: 'pointer',\n          fontFamily: 'inherit',\n          textDecoration: 'none',\n          textAlign: 'center',\n        }),\n        useStyle(useResponsiveWidth(width, 'auto')),\n        margin,\n        useStyle(\n          useResponsiveStyle(\n            [variant, shape, size, textColor, color] as const,\n            ([\n              variant = 'flat',\n              shape = 'rounded',\n              size = 'medium',\n              textColor = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 },\n              color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 },\n            ]) => {\n              const fontSize = {\n                value: { small: 12, medium: 14, large: 18 }[size],\n                unit: 'px',\n              }\n\n              return {\n                color: colorToString(textColor),\n                borderRadius: `${{ square: 0, rounded: 4, pill: 500 }[shape]}px`,\n                padding: `${{ small: '8px 12px', medium: '12px 16px', large: '16px 20px' }[size]}`,\n                fontSize: `${fontSize.value}${fontSize.unit}`,\n                ...{\n                  flat: {\n                    background: colorToString(color),\n                    border: 'none',\n                    transition: ['color', 'background', 'border', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      background: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      background: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  outline: {\n                    background: 'transparent',\n                    boxShadow: `inset 0 0 0 2px ${colorToString(color)}`,\n                    transition: ['color', 'background', 'box-shadow']\n                      .map(property => `${property} 0.15s ease-in-out`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.1)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.1).hex(),\n                    },\n\n                    ':active': {\n                      boxShadow: `inset 0 0 0 2px ${ColorHelper(colorToString(color))\n                        .darken(0.15)\n                        .hex()}`,\n                      color: ColorHelper(colorToString(color)).darken(0.15).hex(),\n                    },\n                  },\n                  shadow: {\n                    background: colorToString(color),\n                    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.2)',\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.18s`)\n                      .join(', '),\n\n                    ':hover': {\n                      boxShadow:\n                        '0 10px 25px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(-1px)',\n                    },\n\n                    ':active': {\n                      boxShadow:\n                        '0 4px 12px rgba(0, 0, 0, 0.15), 0 4px 6px -3px rgba(0, 0, 0, 0.3)',\n                      transform: 'translateY(0px)',\n                    },\n                  },\n                  clear: {\n                    background: 'transparent',\n                    border: 'none',\n\n                    ':hover': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.5).toString(),\n                    },\n\n                    ':active': {\n                      color: ColorHelper(colorToString(textColor)).alpha(0.6).toString(),\n                    },\n                  },\n                  blocky: {\n                    background: colorToString(color),\n                    borderWidth: 1,\n                    borderStyle: 'solid',\n                    borderColor: ColorHelper(colorToString(color)).darken(0.25).hex(),\n                    boxShadow: `0 4px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    transition: ['transform', 'box-shadow']\n                      .map(property => `${property} 0.1s`)\n                      .join(', '),\n\n                    ':hover': {\n                      transform: 'translateY(2px)',\n                      boxShadow: `0 2px ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n\n                    ':active': {\n                      transform: 'translateY(4px)',\n                      boxShadow: `0 0 ${ColorHelper(colorToString(color)).darken(0.25).hex()}`,\n                    },\n                  },\n                  bubbly: {\n                    background: `linear-gradient(\n                      180deg,\n                      ${ColorHelper(colorToString(color)).lighten(0.05).hex()},\n                      ${ColorHelper(colorToString(color)).darken(0.3).saturate(0.05).hex()}\n                    )`,\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      borderRadius: 'inherit',\n                      background: `linear-gradient(\n                        180deg,\n                        ${ColorHelper(colorToString(color)).lighten(0.2).hex()},\n                        ${ColorHelper(colorToString(color)).darken(0.2).saturate(0.05).hex()}\n                      )`,\n                      opacity: '0',\n                      transition: 'opacity 0.15s',\n                    },\n\n                    ':hover': {\n                      ':before': {\n                        opacity: '1',\n                      },\n                    },\n\n                    ':active': {\n                      ':before': {\n                        opacity: '0.25',\n                      },\n                    },\n                  } as const,\n                  skewed: {\n                    position: 'relative',\n                    zIndex: '0',\n\n                    ':before': {\n                      position: 'absolute',\n                      content: '\"\"',\n                      top: 0,\n                      right: 0,\n                      bottom: 0,\n                      left: 0,\n                      zIndex: '-1',\n                      background: colorToString(color),\n                      transform: 'skewX(-12deg)',\n                      borderRadius: 'inherit',\n                      transition: 'transform 0.2s cubic-bezier(0.25, 0, 0.25, 1.75)',\n                    },\n\n                    ':hover:before': {\n                      transform: 'skew(0deg)',\n                    },\n\n                    ':active:before': {\n                      transform: 'skew(-8deg)',\n                    },\n                  } as const,\n                }[variant],\n              }\n            },\n          ),\n        ),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        className,\n      )}\n      link={link}\n    >\n      {children == null ? 'Button Text' : children}\n    </Component>\n  )\n})\n\nexport default Button\n"],"mappings":"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","names":["Button","variant","shape","size","textColor","color","ColorHelper"]}

package/dist/cjs/components/builtin/Carousel/Carousel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideClassName)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  key={key}\n                  className={slideClassName}\n                  onMouseDown={e => e.preventDefault()}\n                  onClick={e => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","Carousel","pageSize","gap","Image"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Carousel/Carousel.tsx"],"sourcesContent":["'use client'\n\nimport {\n  useState,\n  useRef,\n  useEffect,\n  useCallback,\n  forwardRef,\n  Ref,\n  ComponentPropsWithoutRef,\n} from 'react'\nimport { motion, useAnimation } from 'framer-motion'\nimport { useGesture } from '@use-gesture/react'\n\nimport { getBaseBreakpoint } from '@makeswift/controls'\n\nimport { colorToString } from '../../utils/colorToString'\nimport { type ResponsiveColor } from '../../utils/types'\nimport { useMediaQuery } from '../../hooks'\n\nimport Image from '../Image'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\nimport { useResponsiveStyle } from '../../utils/responsive-style'\nimport { useBreakpoints } from '../../../runtimes/react/hooks/use-breakpoints'\nimport {\n  type ResponsiveGapData,\n  type ResponsiveNumberValue,\n  type ResponsiveIconRadioGroupValue,\n  type ImagesData,\n} from '@makeswift/prop-controllers'\n\n// Utility to wrap a value within a range. Pulled from:\n// https://github.com/Popmotion/popmotion/blob/adf681efd8568ada018ce68082dbd585f25c4c7d/packages/popmotion/src/utils/wrap.ts\nfunction wrap(min: number, max: number, v: number): number {\n  const rangeSize = max - min\n  return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min\n}\n\nconst LeftChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M7,13,1,7,7,1\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\nconst RightChevron = () => (\n  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"14\" viewBox=\"0 0 10 14\">\n    <path\n      d=\"M3,1,9,7,3,13\"\n      fill=\"none\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      strokeWidth=\"2\"\n    />\n  </svg>\n)\n\ntype Props = {\n  id?: string\n  images?: ImagesData\n  width?: string\n  margin?: string\n  pageSize?: ResponsiveNumberValue\n  step?: ResponsiveNumberValue\n  slideAlignment?: ResponsiveIconRadioGroupValue<'flex-start' | 'center' | 'flex-end'>\n  gap?: ResponsiveGapData\n  autoplay?: boolean\n  delay?: number\n  showArrows?: boolean\n  arrowPosition?: ResponsiveIconRadioGroupValue<'inside' | 'center' | 'outside'>\n  arrowColor?: ResponsiveColor | null\n  arrowBackground?: ResponsiveColor | null\n  showDots?: boolean\n  dotColor?: ResponsiveColor | null\n  slideBorder?: string\n  slideBorderRadius?: string\n}\n\nconst SWIPE_THRESHOLD = 20\nconst swipePower = (dx: number, velocity: number) => dx * (1 + velocity)\n\n// constructs a CSS [class selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors),\n// returns a compound class selector if the `classname` string includes multiple class names\nconst classSelector = (classname: string) => `.${classname.split(' ').join('.')}`\n\nconst Carousel = forwardRef(function Carousel(\n  {\n    images = [],\n    width,\n    margin,\n    pageSize: responsivePageSize,\n    step: responsiveStep,\n    gap,\n    slideAlignment,\n    showDots,\n    showArrows,\n    arrowPosition,\n    arrowColor,\n    arrowBackground,\n    dotColor,\n    autoplay = false,\n    delay = 5,\n    slideBorder,\n    slideBorderRadius,\n  }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const breakpoints = useBreakpoints()\n  const [index, setIndex] = useState(0)\n  const swipe = useRef(0)\n  const startIndex = wrap(0, images.length, index)\n  const pageSize = useMediaQuery(responsivePageSize) || 1\n  const step = useMediaQuery(responsiveStep) || 1\n  const endIndex = startIndex + pageSize\n  const pageCount = Math.ceil((images.length - pageSize) / step + 1)\n  const pageIndex = Math.ceil(startIndex / step)\n  const isFirstPage = pageIndex === 0\n  const isLastPage = pageIndex === pageCount - 1\n  const paginate = useCallback(\n    (pageDistance: number) => {\n      if (pageDistance === 0) return\n\n      const direction = pageDistance / Math.abs(pageDistance)\n      const remaining = direction > 0 ? images.slice(endIndex) : images.slice(0, startIndex)\n      const distance = direction * Math.min(remaining.length, step * Math.abs(pageDistance))\n\n      setIndex(index + distance)\n    },\n    [images, index, startIndex, endIndex, step],\n  )\n  // @ts-expect-error: `useAnimation` types expect no arguments.\n  const animation = useAnimation({ x: 0, transition: { type: 'spring', stiffness: 100 } })\n  const bindPage = useGesture(\n    {\n      onDrag: ({ movement: [mx], delta: [dx], velocity: [vx] }) => {\n        animation.start({ x: mx })\n        swipe.current = swipePower(dx, vx)\n      },\n      onDragEnd: () => {\n        animation.start({ x: 0 })\n\n        if (swipe.current > SWIPE_THRESHOLD) paginate(1)\n        else if (swipe.current < -SWIPE_THRESHOLD) paginate(-1)\n      },\n    },\n    {\n      drag: {\n        axis: 'x',\n        bounds: { left: 0, right: 0 },\n        rubberband: true,\n      },\n    },\n  )\n\n  useEffect(() => {\n    if (!autoplay || pageSize !== 0) setIndex(0)\n  }, [autoplay, pageSize])\n\n  useEffect(() => {\n    if (!autoplay) return () => {}\n\n    const intervalId = setInterval(() => (isLastPage ? setIndex(0) : paginate(1)), delay * 1000)\n\n    return () => clearInterval(intervalId)\n  }, [autoplay, delay, paginate, isLastPage])\n\n  const clipMaskClassName = useStyle({ overflow: 'hidden' })\n  const pageClassName = useStyle({ position: 'relative', width: '100%' })\n  const slideClassName = cx(\n    useStyle({ display: 'flex' }),\n    useStyle(\n      useResponsiveStyle([responsivePageSize] as const, ([pageSize = 1]) => ({\n        flexBasis: `${100 / pageSize}%`,\n        maxWidth: `${100 / pageSize}%`,\n        minWidth: `${100 / pageSize}%`,\n      })),\n    ),\n    useStyle(\n      useResponsiveStyle([slideAlignment] as const, ([alignItems = 'center']) => ({ alignItems })),\n    ),\n  )\n\n  const reelClassName = cx(\n    useStyle({ display: 'flex', position: 'relative', flexWrap: 'nowrap' }),\n    useStyle(\n      useResponsiveStyle([gap] as const, ([gap = { value: 0, unit: 'px' }]) => ({\n        margin: `0 ${`${-gap.value / 2}${gap.unit}`}`,\n        [`& > ${classSelector(slideClassName)}`]: {\n          padding: `0 ${`${gap.value / 2}${gap.unit}`}`,\n        },\n      })),\n    ),\n  )\n\n  const arrowClassName = cx(\n    useStyle({\n      padding: 10,\n      borderRadius: '50%',\n      outline: 0,\n      border: 0,\n      width: 40,\n      height: 40,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      cursor: 'pointer',\n      userSelect: 'none',\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowBackground] as const,\n        ([background = { swatch: { hue: 0, saturation: 0, lightness: 100 }, alpha: 1 }]) => ({\n          background: colorToString(background),\n        }),\n      ),\n    ),\n    useStyle({ svg: { transition: 'transform 0.15s', stroke: 'currentcolor' } }),\n  )\n\n  const slopClassName = cx(\n    useStyle({\n      position: 'absolute',\n      top: 0,\n      bottom: 0,\n\n      display: 'flex',\n      '&[hidden]': {\n        display: 'none',\n      },\n\n      alignItems: 'center',\n      cursor: 'pointer',\n      zIndex: 2,\n    }),\n    useStyle(\n      useResponsiveStyle(\n        [arrowColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  const leftSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(-100% - 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(-50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      left: 0,\n\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(-2px)',\n        },\n      },\n    }),\n  )\n\n  const rightSlopClassName = cx(\n    slopClassName,\n    useStyle(\n      useResponsiveStyle([arrowPosition] as const, ([position = 'inside']) => {\n        switch (position) {\n          case 'inside':\n            return { transform: 'translateX(-8px)' }\n\n          case 'outside':\n            return { transform: 'translateX(calc(100% + 8px))' }\n\n          default:\n            return { transform: 'translateX(calc(50%))' }\n        }\n      }),\n    ),\n    useStyle({\n      right: 0,\n      [`&:hover > ${classSelector(arrowClassName)}`]: {\n        '& > svg': {\n          transform: 'translateX(2px)',\n        },\n      },\n    }),\n  )\n\n  const dotsClassName = cx(\n    useStyle({ display: showDots ? 'flex' : 'none', justifyContent: 'center', marginTop: 20 }),\n    useStyle(\n      useResponsiveStyle(\n        [dotColor] as const,\n        ([color = { swatch: { hue: 0, saturation: 0, lightness: 0 }, alpha: 1 }]) => ({\n          color: colorToString(color),\n        }),\n      ),\n    ),\n  )\n\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ position: 'relative', display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        useStyle({ '&:focus': { outline: 0 } }),\n      )}\n      tabIndex={-1}\n      onKeyDown={e => {\n        switch (e.key) {\n          case 'ArrowRight':\n            paginate(1)\n            break\n          case 'ArrowLeft':\n            paginate(-1)\n            break\n          default:\n        }\n      }}\n    >\n      {/* NOTE: We set height to 100% here to fix an issue on IE11 where the child height of a flex column extends too far */}\n      <div className={useStyle({ position: 'relative', height: '100%' })}>\n        <div className={clipMaskClassName}>\n          {/* https://github.com/framer/motion/issues/1723 */}\n          {/* @ts-expect-error: React HTMLElement typings conflict with motion components */}\n          <motion.div {...bindPage()} className={pageClassName} animate={animation}>\n            <motion.div\n              // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n              // Upgrade framer-motion package to fix type error\n              className={reelClassName}\n              animate={{ x: `${-(100 / pageSize) * startIndex}%` }}\n              transition={{\n                x: {\n                  type: 'tween',\n                  ease: [0.165, 0.84, 0.44, 1],\n                  duration: 0.5,\n                },\n              }}\n            >\n              {images.map(({ props: imageProps, key }) => (\n                <motion.div\n                  key={key}\n                  // @ts-expect-error: Type error when upgrading to @types/react@19.2.7 and @types/react-dom@19.2.3\n                  // Upgrade framer-motion package to fix type error\n                  className={slideClassName}\n                  onMouseDown={(e: MouseEvent) => e.preventDefault()}\n                  onClick={(e: MouseEvent) => {\n                    if (swipe.current !== 0) e.preventDefault()\n                  }}\n                >\n                  <Image\n                    width={[\n                      {\n                        deviceId: getBaseBreakpoint(breakpoints).id,\n                        value: { value: 100, unit: '%' },\n                      },\n                    ]}\n                    file={imageProps.file}\n                    altText={imageProps.altText}\n                    link={imageProps.link}\n                    border={slideBorder}\n                    borderRadius={slideBorderRadius}\n                  />\n                </motion.div>\n              ))}\n            </motion.div>\n          </motion.div>\n        </div>\n        <div\n          onClick={() => paginate(-1)}\n          className={leftSlopClassName}\n          hidden={!showArrows || isFirstPage}\n        >\n          <div className={arrowClassName}>\n            <LeftChevron />\n          </div>\n        </div>\n        <div\n          onClick={() => paginate(1)}\n          className={rightSlopClassName}\n          hidden={!showArrows || isLastPage}\n        >\n          <div className={arrowClassName}>\n            <RightChevron />\n          </div>\n        </div>\n      </div>\n      <div className={dotsClassName}>\n        {Array.from({ length: pageCount }).map((_, i) => (\n          <Dot key={i} active={i === pageIndex} onClick={() => paginate(i - pageIndex)} />\n        ))}\n      </div>\n    </div>\n  )\n})\n\nexport default Carousel\n\ntype DotBaseProps = {\n  className?: string\n  active: boolean\n}\n\ntype DotProps = DotBaseProps & Omit<ComponentPropsWithoutRef<'div'>, keyof DotBaseProps>\n\nfunction Dot({ className, active, ...restOfProps }: DotProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          position: 'relative',\n          margin: '0 6px',\n          borderRadius: '50%',\n          cursor: 'pointer',\n          width: 16,\n          height: 16,\n\n          '&::before, &::after': {\n            content: '\"\"',\n            position: 'absolute',\n            top: '50%',\n            left: '50%',\n            display: 'block',\n            borderRadius: '50%',\n            transition: 'all 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n          },\n\n          '&::before': {\n            boxShadow: '0 0 0 2px currentColor',\n            transform: 'translate3d(-50%, -50%, 0)',\n            width: active ? 16 : 10,\n            height: active ? 16 : 10,\n          },\n\n          '&::after': {\n            background: 'currentColor',\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n            width: 10,\n            height: 10,\n          },\n\n          '&:hover::after': {\n            transform: `translate3d(-50%, -50%, 0) scale(${active ? 1 : 0})`,\n          },\n        }),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":"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","names":["import_react","Carousel","pageSize","gap","Image"]}

package/dist/cjs/components/builtin/Embed/Embed.js

@@ -57,7 +57,9 @@ const Embed = (0, import_react.forwardRef)(function Embed2({ id, width, margin,
   (0, import_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(() => {
     setShouldRender(true);
   }, []);
-  (0, import_react.useImperativeHandle)(ref, () => container, [container]);
+  (0, import_react.useImperativeHandle)(ref, () => container, [
+    container
+  ]);
   (0, import_react.useEffect)(() => {
     if (!container)
       return;

package/dist/cjs/components/builtin/Embed/Embed.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle(ref, () => container, [container])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA8GI;AA1GJ,mBAA0E;AAE1E,uCAA0C;AAC1C,uBAAyB;AACzB,iBAAmB;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,kEAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,WAAW,CAAC,SAAS,CAAC;AAErD,8BAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,gBAAY,2BAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,eAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}
+{"version":3,"sources":["../../../../../src/components/builtin/Embed/Embed.tsx"],"sourcesContent":["'use client'\n\n/* eslint-env browser */\n\nimport { useState, useEffect, forwardRef, Ref, useImperativeHandle } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'\nimport { useStyle } from '../../../runtimes/react/use-style'\nimport { cx } from '@emotion/css'\n\ntype Props = {\n  id?: string\n  html?: string\n  width?: string\n  margin?: string\n}\n\nconst defaultHtml = `<div style=\"padding: 24px; background-color: rgba(161, 168, 194, 0.18); overflow: hidden;\">\n<svg width=\"316\" height=\"168\" viewBox=\"0 0 316 168\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect width=\"70\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"78\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"116\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"20\" width=\"120\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"128\" y=\"20\" width=\"30\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"166\" y=\"20\" width=\"78\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect y=\"60\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"80\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"100\" width=\"110\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"206\" y=\"100\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"238\" y=\"100\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"40\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"88\" y=\"120\" width=\"50\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"146\" y=\"120\" width=\"24\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"178\" y=\"120\" width=\"90\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.25\"/>\n<rect x=\"276\" y=\"120\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect x=\"20\" y=\"140\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n<rect y=\"160\" width=\"40\" height=\"8\" rx=\"2\" fill=\"#A1A8C2\" fill-opacity=\"0.5\"/>\n</svg>\n</div>`\nconst SCRIPT_TAG = 'script'\n\nconst Embed = forwardRef(function Embed(\n  { id, width, margin, html = defaultHtml }: Props,\n  ref: Ref<HTMLDivElement | null>,\n) {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n  const [shouldRender, setShouldRender] = useState(false)\n\n  useIsomorphicLayoutEffect(() => {\n    setShouldRender(true)\n  }, [])\n\n  useImperativeHandle<HTMLDivElement | null, HTMLDivElement | null>(ref, () => container, [\n    container,\n  ])\n\n  useEffect(() => {\n    // TODO: When we SSR the editor, we can remove the editor check\n    // and not run this effect on the first render.\n    if (!container) return\n\n    const walker = container.ownerDocument.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {\n      acceptNode(node: Element) {\n        return node.tagName.toLowerCase() === SCRIPT_TAG\n          ? NodeFilter.FILTER_ACCEPT\n          : NodeFilter.FILTER_REJECT\n      },\n    })\n\n    const nodes: Element[] = []\n\n    while (walker.nextNode()) nodes.push(walker.currentNode as Element)\n\n    // By default scripts appended dynamically will execute asyncrhonously. Here we ensure that\n    // scripts are loaded synchronously since that's what a user usually expects with scripts in\n    // embedded in HTML which usually comes from the server.\n    //\n    // See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#notes\n    async function executeScriptsInOrder() {\n      for (let i = 0; i < nodes.length; i++) {\n        await new Promise<void>(resolve => {\n          const node = nodes[i]\n          const script = node.ownerDocument.createElement(SCRIPT_TAG)\n\n          script.textContent = node.textContent\n          Array.from(node.attributes).forEach(({ name, value }) => {\n            script.setAttribute(name, value)\n          })\n\n          script.onload = () => resolve()\n          script.onerror = () => resolve()\n\n          node.parentNode?.insertBefore(script, node)\n          node.parentNode?.removeChild(node)\n\n          if (!script.hasAttribute('src')) resolve()\n        })\n      }\n    }\n\n    executeScriptsInOrder().catch(error => {\n      // Ignore errors from user-provided code\n      console.error(error)\n    })\n  }, [container, html])\n\n  const className = useStyle({ minHeight: 15 })\n\n  if (shouldRender === false) return null\n\n  return (\n    <div\n      ref={setContainer}\n      id={id}\n      className={cx(className, width, margin)}\n      dangerouslySetInnerHTML={{ __html: html }}\n    />\n  )\n})\n\nexport default Embed\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHI;AA5GJ,mBAA0E;AAE1E,uCAA0C;AAC1C,uBAAyB;AACzB,iBAAmB;AASnB,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBpB,MAAM,aAAa;AAEnB,MAAM,YAAQ,yBAAW,SAASA,OAChC,EAAE,IAAI,OAAO,QAAQ,OAAO,YAAY,GACxC,KACA;AACA,QAAM,CAAC,WAAW,YAAY,QAAI,uBAAgC,IAAI;AACtE,QAAM,CAAC,cAAc,eAAe,QAAI,uBAAS,KAAK;AAEtD,kEAA0B,MAAM;AAC9B,oBAAgB,IAAI;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,wCAAkE,KAAK,MAAM,WAAW;AAAA,IACtF;AAAA,EACF,CAAC;AAED,8BAAU,MAAM;AAGd,QAAI,CAAC;AAAW;AAEhB,UAAM,SAAS,UAAU,cAAc,iBAAiB,WAAW,WAAW,cAAc;AAAA,MAC1F,WAAW,MAAe;AACxB,eAAO,KAAK,QAAQ,YAAY,MAAM,aAClC,WAAW,gBACX,WAAW;AAAA,MACjB;AAAA,IACF,CAAC;AAED,UAAM,QAAmB,CAAC;AAE1B,WAAO,OAAO,SAAS;AAAG,YAAM,KAAK,OAAO,WAAsB;AAOlE,mBAAe,wBAAwB;AACrC,eAAS,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK;AACrC,cAAM,IAAI,QAAc,aAAW;AACjC,gBAAM,OAAO,MAAM,CAAC;AACpB,gBAAM,SAAS,KAAK,cAAc,cAAc,UAAU;AAE1D,iBAAO,cAAc,KAAK;AAC1B,gBAAM,KAAK,KAAK,UAAU,EAAE,QAAQ,CAAC,EAAE,MAAM,MAAM,MAAM;AACvD,mBAAO,aAAa,MAAM,KAAK;AAAA,UACjC,CAAC;AAED,iBAAO,SAAS,MAAM,QAAQ;AAC9B,iBAAO,UAAU,MAAM,QAAQ;AAE/B,eAAK,YAAY,aAAa,QAAQ,IAAI;AAC1C,eAAK,YAAY,YAAY,IAAI;AAEjC,cAAI,CAAC,OAAO,aAAa,KAAK;AAAG,oBAAQ;AAAA,QAC3C,CAAC;AAAA,MACH;AAAA,IACF;AAEA,0BAAsB,EAAE,MAAM,WAAS;AAErC,cAAQ,MAAM,KAAK;AAAA,IACrB,CAAC;AAAA,EACH,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,QAAM,gBAAY,2BAAS,EAAE,WAAW,GAAG,CAAC;AAE5C,MAAI,iBAAiB;AAAO,WAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL;AAAA,MACA,eAAW,eAAG,WAAW,OAAO,MAAM;AAAA,MACtC,yBAAyB,EAAE,QAAQ,KAAK;AAAA;AAAA,EAC1C;AAEJ,CAAC;AAED,IAAO,gBAAQ;","names":["Embed"]}

package/dist/cjs/components/builtin/Form/components/Field/components/Label/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): JSX.Element {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAvDJ,2BAA8B;AAE9B,yBAAiE;AACjE,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,6BAAU;AACb,aAAO;AAAA,IAET,KAAK,6BAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA0B;AACxB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,QAAI,mCAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,YACrD,+BAAS,gDAAuB,cAAc,CAAC;AAAA,YAC/C;AAAA,cACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,yBAAM,QAAQC,YAAW,6BAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,QAAI,oCAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/Label/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react'\nimport { colorToString } from '../../../../../../utils/colorToString'\n\nimport { useFormContext, Size, Sizes, Contrast, Contrasts } from '../../../../context/FormContext'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\nexport function getSizeHeight(size: Size): number {\n  switch (size) {\n    case Sizes.SMALL:\n      return 14\n\n    case Sizes.MEDIUM:\n      return 18\n\n    case Sizes.LARGE:\n      return 22\n\n    default:\n      throw new Error(`Invalid form size \"${size}\"`)\n  }\n}\n\nfunction getContrastColor(contrast: Contrast): string {\n  switch (contrast) {\n    case Contrasts.LIGHT:\n      return 'rgba(0, 0, 0, 0.8)'\n\n    case Contrasts.DARK:\n      return 'rgba(255, 255, 255, 0.95)'\n\n    default:\n      throw new Error(`Invalid form contrast \"${contrast}\"`)\n  }\n}\n\ntype BaseProps<T extends ElementType> = {\n  as?: T\n}\n\ntype Props<T extends ElementType> = BaseProps<T> &\n  Omit<ComponentPropsWithoutRef<'label'>, keyof BaseProps<T>>\n\nexport default function Label<T extends ElementType = 'label'>({\n  as,\n  className,\n  ...restOfProps\n}: Props<T>): ReactNode {\n  const Component = as ?? 'label'\n  const { contrast, size, labelTextStyle, labelTextColor } = useFormContext()\n\n  return (\n    <Component\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: 'block', margin: '0 0 0.25em 0' }),\n        useStyle(useResponsiveTextStyle(labelTextStyle)),\n        useStyle(\n          useResponsiveStyle(\n            [size, contrast, labelTextColor] as const,\n            ([size = Sizes.MEDIUM, contrast = Contrasts.LIGHT, textColor]) => ({\n              minHeight: getSizeHeight(size),\n              color: textColor == null ? getContrastColor(contrast) : colorToString(textColor),\n            }),\n          ),\n        ),\n        className,\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAvDJ,2BAA8B;AAE9B,yBAAiE;AACjE,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAEA,SAAS,cAAc,MAAoB;AAChD,UAAQ,MAAM;AAAA,IACZ,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET,KAAK,yBAAM;AACT,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,sBAAsB,IAAI,GAAG;AAAA,EACjD;AACF;AAEA,SAAS,iBAAiB,UAA4B;AACpD,UAAQ,UAAU;AAAA,IAChB,KAAK,6BAAU;AACb,aAAO;AAAA,IAET,KAAK,6BAAU;AACb,aAAO;AAAA,IAET;AACE,YAAM,IAAI,MAAM,0BAA0B,QAAQ,GAAG;AAAA,EACzD;AACF;AASe,SAAR,MAAwD;AAAA,EAC7D;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAwB;AACtB,QAAM,YAAY,MAAM;AACxB,QAAM,EAAE,UAAU,MAAM,gBAAgB,eAAe,QAAI,mCAAe;AAE1E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,SAAS,QAAQ,eAAe,CAAC;AAAA,YACrD,+BAAS,gDAAuB,cAAc,CAAC;AAAA,YAC/C;AAAA,cACE;AAAA,YACE,CAAC,MAAM,UAAU,cAAc;AAAA,YAC/B,CAAC,CAACA,QAAO,yBAAM,QAAQC,YAAW,6BAAU,OAAO,SAAS,OAAO;AAAA,cACjE,WAAW,cAAcD,KAAI;AAAA,cAC7B,OAAO,aAAa,OAAO,iBAAiBC,SAAQ,QAAI,oCAAc,SAAS;AAAA,YACjF;AAAA,UACF;AAAA,QACF;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;","names":["size","contrast"]}

package/dist/cjs/components/builtin/Form/components/Field/components/PlaceholderTableField/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          maxWidth: 120,\n          minWidth: 60,\n          borderRadius: 2,\n          backgroundColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n            minHeight: 0.5 * getLabelSizeHeight(size),\n            maxHeight: 0.5 * getLabelSizeHeight(size),\n          })),\n        ),\n      )}\n    />\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          width: '100%',\n          borderWidth: 2,\n          borderStyle: 'solid',\n          borderColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size] as const,\n            ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              borderRadius: getShapeBorderRadius(shape),\n            }),\n          ),\n        ),\n      )}\n    />\n  )\n}\n\nexport default function PlaceholderTableField(): JSX.Element {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAUI;AAVJ,yBAAqD;AACrD,mBAAoD;AACpD,mBAAoD;AACpD,6BAAqC;AACrC,uBAAyB;AACzB,8BAAmC;AACnC,iBAAmB;AAEnB,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX,CAAC;AAAA,YACD;AAAA,cACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,yBAAM,MAAM,OAAO;AAAA,YAC9D,QAAQ,mBAAe,aAAAC,eAAmBD,KAAI,CAAC;AAAA,YAC/C,WAAW,UAAM,aAAAC,eAAmBD,KAAI;AAAA,YACxC,WAAW,UAAM,aAAAC,eAAmBD,KAAI;AAAA,UAC1C,EAAE;AAAA,QACJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS;AAAA,QACX,CAAC;AAAA,YACD;AAAA,cACE;AAAA,YACE,CAAC,OAAO,IAAI;AAAA,YACZ,CAAC,CAACE,SAAQ,0BAAO,SAASF,QAAO,yBAAM,MAAM,OAAO;AAAA,cAClD,eAAW,aAAAG,eAAmBH,KAAI;AAAA,cAClC,eAAW,aAAAG,eAAmBH,KAAI;AAAA,cAClC,kBAAc,6CAAqBE,MAAK;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,wBAAsD;AAC3D,QAAM,EAAE,MAAM,MAAM,QAAI,mCAAe;AAEvC,SACE,4EACE;AAAA,gDAAC,SAAM,MAAY;AAAA,IACnB,4CAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","getLabelSizeHeight","shape","getInputSizeHeight"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Form/components/Field/components/PlaceholderTableField/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { useFormContext, Sizes, Shapes, Value } from '../../../../context/FormContext'\nimport { getSizeHeight as getLabelSizeHeight } from '../Label'\nimport { getSizeHeight as getInputSizeHeight } from '../Input'\nimport { getShapeBorderRadius } from '../../services/responsiveField'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport { useResponsiveStyle } from '../../../../../../utils/responsive-style'\nimport { cx } from '@emotion/css'\n\nfunction Label({ size }: Pick<Value, 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          maxWidth: 120,\n          minWidth: 60,\n          borderRadius: 2,\n          backgroundColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle([size] as const, ([size = Sizes.MEDIUM]) => ({\n            margin: `calc(0.25 * ${getLabelSizeHeight(size)}px + 2px) 0`,\n            minHeight: 0.5 * getLabelSizeHeight(size),\n            maxHeight: 0.5 * getLabelSizeHeight(size),\n          })),\n        ),\n      )}\n    />\n  )\n}\n\nfunction Input({ shape, size }: Pick<Value, 'shape' | 'size'>) {\n  return (\n    <div\n      className={cx(\n        useStyle({\n          display: 'block',\n          width: '100%',\n          borderWidth: 2,\n          borderStyle: 'solid',\n          borderColor: '#5f49f4',\n          opacity: 0.4,\n        }),\n        useStyle(\n          useResponsiveStyle(\n            [shape, size] as const,\n            ([shape = Shapes.ROUNDED, size = Sizes.MEDIUM]) => ({\n              minHeight: getInputSizeHeight(size),\n              maxHeight: getInputSizeHeight(size),\n              borderRadius: getShapeBorderRadius(shape),\n            }),\n          ),\n        ),\n      )}\n    />\n  )\n}\n\nexport default function PlaceholderTableField(): ReactNode {\n  const { size, shape } = useFormContext()\n\n  return (\n    <>\n      <Label size={size} />\n      <Input shape={shape} size={size} />\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,yBAAqD;AACrD,mBAAoD;AACpD,mBAAoD;AACpD,6BAAqC;AACrC,uBAAyB;AACzB,8BAAmC;AACnC,iBAAmB;AAEnB,SAAS,MAAM,EAAE,KAAK,GAAwB;AAC5C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,UAAU;AAAA,UACV,UAAU;AAAA,UACV,cAAc;AAAA,UACd,iBAAiB;AAAA,UACjB,SAAS;AAAA,QACX,CAAC;AAAA,YACD;AAAA,cACE,4CAAmB,CAAC,IAAI,GAAY,CAAC,CAACA,QAAO,yBAAM,MAAM,OAAO;AAAA,YAC9D,QAAQ,mBAAe,aAAAC,eAAmBD,KAAI,CAAC;AAAA,YAC/C,WAAW,UAAM,aAAAC,eAAmBD,KAAI;AAAA,YACxC,WAAW,UAAM,aAAAC,eAAmBD,KAAI;AAAA,UAC1C,EAAE;AAAA,QACJ;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEA,SAAS,MAAM,EAAE,OAAO,KAAK,GAAkC;AAC7D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,aAAa;AAAA,UACb,aAAa;AAAA,UACb,aAAa;AAAA,UACb,SAAS;AAAA,QACX,CAAC;AAAA,YACD;AAAA,cACE;AAAA,YACE,CAAC,OAAO,IAAI;AAAA,YACZ,CAAC,CAACE,SAAQ,0BAAO,SAASF,QAAO,yBAAM,MAAM,OAAO;AAAA,cAClD,eAAW,aAAAG,eAAmBH,KAAI;AAAA,cAClC,eAAW,aAAAG,eAAmBH,KAAI;AAAA,cAClC,kBAAc,6CAAqBE,MAAK;AAAA,YAC1C;AAAA,UACF;AAAA,QACF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAEe,SAAR,wBAAoD;AACzD,QAAM,EAAE,MAAM,MAAM,QAAI,mCAAe;AAEvC,SACE,4EACE;AAAA,gDAAC,SAAM,MAAY;AAAA,IACnB,4CAAC,SAAM,OAAc,MAAY;AAAA,KACnC;AAEJ;","names":["size","getLabelSizeHeight","shape","getInputSizeHeight"]}

package/dist/cjs/components/builtin/Form/components/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Field/index.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Field as FormikField, getIn } from 'formik'\n\nimport SingleLineTextTableField from './components/SingleLineTextTableField'\nimport LongTextTableField from './components/LongTextTableField'\nimport CheckboxTableField from './components/CheckboxTableField'\nimport MultipleSelectTableField from './components/MultipleSelectTableField'\nimport SingleSelectTableField from './components/SingleSelectTableField'\nimport PhoneNumberTableField from './components/PhoneNumberTableField'\nimport EmailTableField from './components/EmailTableField'\nimport URLTableField from './components/URLTableField'\nimport NumberTableField from './components/NumberTableField'\nimport PlaceholderTableField from './components/PlaceholderTableField'\nimport { TableColumn } from '../../types'\n\nfunction getTypeMismatchErrorMessage(tableColumn: TableColumn | null | undefined, label: string) {\n  switch ((tableColumn || {}).__typename) {\n    case 'PhoneNumberTableColumn':\n      return `${label} field must be a valid phone number.`\n\n    case 'EmailTableColumn':\n      return `${label} field must be a valid email.`\n\n    case 'URLTableColumn':\n      return `${label} field must be a valid URL.`\n\n    case 'NumberTableColumn':\n      return `${label} field must be a valid number.`\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'CheckboxTableColumn':\n    default:\n      return `${label} field is invalid.`\n  }\n}\n\nfunction getTableColumnField(tableColumn: TableColumn | null | undefined) {\n  switch ((tableColumn || {}).__typename) {\n    case 'SingleLineTextTableColumn':\n      return SingleLineTextTableField\n\n    case 'LongTextTableColumn':\n      return LongTextTableField\n\n    case 'CheckboxTableColumn':\n      return CheckboxTableField\n\n    case 'MultipleSelectTableColumn':\n      return MultipleSelectTableField\n\n    case 'SingleSelectTableColumn':\n      return SingleSelectTableField\n\n    case 'PhoneNumberTableColumn':\n      return PhoneNumberTableField\n\n    case 'EmailTableColumn':\n      return EmailTableField\n\n    case 'URLTableColumn':\n      return URLTableField\n\n    case 'NumberTableColumn':\n      return NumberTableField\n\n    default:\n      return SingleLineTextTableField\n  }\n}\n\ntype TableFormField = {\n  id: string\n  tableColumnId: string\n  label?: string\n  placeholder?: string\n  required?: boolean\n  hidden?: boolean\n  type?: 'select' | 'radio'\n  hideLabel?: boolean\n}\n\ntype Props = {\n  tableColumn: TableColumn | null | undefined\n  tableFormField: TableFormField\n}\n\n// Escape characters: [ ] '\nfunction escapeCharacters(string: string) {\n  return string.replace(/[[\\]']/g, '\\\\$&')\n}\n\nexport default function Field({\n  tableColumn,\n  tableFormField: {\n    id,\n    label = '',\n    placeholder,\n    required = false,\n    hidden = false,\n    type = 'radio',\n    hideLabel = false,\n  },\n}: Props): JSX.Element {\n  const TableColumnField = getTableColumnField(tableColumn)\n  const input = useRef<\n    | {\n        validity: {\n          valueMissing: boolean\n          typeMismatch: boolean\n        }\n      }\n    | null\n    | undefined\n  >(null)\n\n  if (!tableColumn) return <PlaceholderTableField />\n\n  function validate() {\n    let errorMessage\n\n    if (input.current) {\n      const { validity = {} as ValidityState } = input.current\n\n      if (validity.valueMissing) errorMessage = `${label} is required.`\n\n      if (validity.typeMismatch) errorMessage = getTypeMismatchErrorMessage(tableColumn, label)\n    }\n\n    return errorMessage\n  }\n\n  // We're using `['${tableColumn.name}']` to avoid default Formik nested object behavior\n  // which was causing an issue for table column names containing a dot.\n  // https://formik.org/docs/guides/arrays#avoid-nesting\n  // We need to escape square brackets [ ] because it's also used by Lodash\n  // set array: https://lodash.com/docs/4.17.15#set, which is used by Formik.\n  // We need to escape ' because otherwise Formik will wrap the field name inside a ''\n  // for example, if we have hello'world, Formik will name the field 'hello'world'\n  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`\n\n  return (\n    <FormikField name={formikFieldName} validate={validate}>\n      {({ field, form }: any) =>\n        hidden ? (\n          <input {...field} ref={input} type=\"hidden\" />\n        ) : (\n          <TableColumnField\n            {...field}\n            type={type}\n            form={form}\n            tableColumn={tableColumn}\n            ref={input}\n            id={id}\n            error={getIn(form.touched, field.name) && getIn(form.errors, field.name)}\n            label={label}\n            placeholder={placeholder}\n            required={required}\n            hideLabel={hideLabel}\n          />\n        )\n      }\n    </FormikField>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoH2B;AApH3B,mBAAuB;AACvB,oBAA4C;AAE5C,sCAAqC;AACrC,gCAA+B;AAC/B,gCAA+B;AAC/B,sCAAqC;AACrC,oCAAmC;AACnC,mCAAkC;AAClC,6BAA4B;AAC5B,2BAA0B;AAC1B,8BAA6B;AAC7B,mCAAkC;AAGlC,SAAS,4BAA4B,aAA6C,OAAe;AAC/F,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,GAAG,KAAK;AAAA,EACnB;AACF;AAEA,SAAS,oBAAoB,aAA6C;AACxE,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,gCAAAA;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,gCAAAC;AAAA,IAET,KAAK;AACH,aAAO,8BAAAC;AAAA,IAET,KAAK;AACH,aAAO,6BAAAC;AAAA,IAET,KAAK;AACH,aAAO,uBAAAC;AAAA,IAET,KAAK;AACH,aAAO,qBAAAC;AAAA,IAET,KAAK;AACH,aAAO,wBAAAC;AAAA,IAET;AACE,aAAO,gCAAAR;AAAA,EACX;AACF;AAmBA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,OAAO,QAAQ,WAAW,MAAM;AACzC;AAEe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF,GAAuB;AACrB,QAAM,mBAAmB,oBAAoB,WAAW;AACxD,QAAM,YAAQ,qBASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,4CAAC,6BAAAS,SAAA,EAAsB;AAEhD,WAAS,WAAW;AAClB,QAAI;AAEJ,QAAI,MAAM,SAAS;AACjB,YAAM,EAAE,WAAW,CAAC,EAAmB,IAAI,MAAM;AAEjD,UAAI,SAAS;AAAc,uBAAe,GAAG,KAAK;AAElD,UAAI,SAAS;AAAc,uBAAe,4BAA4B,aAAa,KAAK;AAAA,IAC1F;AAEA,WAAO;AAAA,EACT;AASA,QAAM,kBAAkB,KAAK,iBAAiB,YAAY,IAAI,CAAC;AAE/D,SACE,4CAAC,cAAAC,OAAA,EAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,4CAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,IAE5C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,WAAO,qBAAM,KAAK,SAAS,MAAM,IAAI,SAAK,qBAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":["SingleLineTextTableField","LongTextTableField","CheckboxTableField","MultipleSelectTableField","SingleSelectTableField","PhoneNumberTableField","EmailTableField","URLTableField","NumberTableField","PlaceholderTableField","FormikField"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Field/index.tsx"],"sourcesContent":["import { useRef, ReactNode } from 'react'\nimport { Field as FormikField, getIn } from 'formik'\n\nimport SingleLineTextTableField from './components/SingleLineTextTableField'\nimport LongTextTableField from './components/LongTextTableField'\nimport CheckboxTableField from './components/CheckboxTableField'\nimport MultipleSelectTableField from './components/MultipleSelectTableField'\nimport SingleSelectTableField from './components/SingleSelectTableField'\nimport PhoneNumberTableField from './components/PhoneNumberTableField'\nimport EmailTableField from './components/EmailTableField'\nimport URLTableField from './components/URLTableField'\nimport NumberTableField from './components/NumberTableField'\nimport PlaceholderTableField from './components/PlaceholderTableField'\nimport { TableColumn } from '../../types'\n\nfunction getTypeMismatchErrorMessage(tableColumn: TableColumn | null | undefined, label: string) {\n  switch ((tableColumn || {}).__typename) {\n    case 'PhoneNumberTableColumn':\n      return `${label} field must be a valid phone number.`\n\n    case 'EmailTableColumn':\n      return `${label} field must be a valid email.`\n\n    case 'URLTableColumn':\n      return `${label} field must be a valid URL.`\n\n    case 'NumberTableColumn':\n      return `${label} field must be a valid number.`\n\n    case 'SingleLineTextTableColumn':\n    case 'LongTextTableColumn':\n    case 'CheckboxTableColumn':\n    default:\n      return `${label} field is invalid.`\n  }\n}\n\nfunction getTableColumnField(tableColumn: TableColumn | null | undefined) {\n  switch ((tableColumn || {}).__typename) {\n    case 'SingleLineTextTableColumn':\n      return SingleLineTextTableField\n\n    case 'LongTextTableColumn':\n      return LongTextTableField\n\n    case 'CheckboxTableColumn':\n      return CheckboxTableField\n\n    case 'MultipleSelectTableColumn':\n      return MultipleSelectTableField\n\n    case 'SingleSelectTableColumn':\n      return SingleSelectTableField\n\n    case 'PhoneNumberTableColumn':\n      return PhoneNumberTableField\n\n    case 'EmailTableColumn':\n      return EmailTableField\n\n    case 'URLTableColumn':\n      return URLTableField\n\n    case 'NumberTableColumn':\n      return NumberTableField\n\n    default:\n      return SingleLineTextTableField\n  }\n}\n\ntype TableFormField = {\n  id: string\n  tableColumnId: string\n  label?: string\n  placeholder?: string\n  required?: boolean\n  hidden?: boolean\n  type?: 'select' | 'radio'\n  hideLabel?: boolean\n}\n\ntype Props = {\n  tableColumn: TableColumn | null | undefined\n  tableFormField: TableFormField\n}\n\n// Escape characters: [ ] '\nfunction escapeCharacters(string: string) {\n  return string.replace(/[[\\]']/g, '\\\\$&')\n}\n\nexport default function Field({\n  tableColumn,\n  tableFormField: {\n    id,\n    label = '',\n    placeholder,\n    required = false,\n    hidden = false,\n    type = 'radio',\n    hideLabel = false,\n  },\n}: Props): ReactNode {\n  const TableColumnField = getTableColumnField(tableColumn)\n  const input = useRef<\n    | {\n        validity: {\n          valueMissing: boolean\n          typeMismatch: boolean\n        }\n      }\n    | null\n    | undefined\n  >(null)\n\n  if (!tableColumn) return <PlaceholderTableField />\n\n  function validate() {\n    let errorMessage\n\n    if (input.current) {\n      const { validity = {} as ValidityState } = input.current\n\n      if (validity.valueMissing) errorMessage = `${label} is required.`\n\n      if (validity.typeMismatch) errorMessage = getTypeMismatchErrorMessage(tableColumn, label)\n    }\n\n    return errorMessage\n  }\n\n  // We're using `['${tableColumn.name}']` to avoid default Formik nested object behavior\n  // which was causing an issue for table column names containing a dot.\n  // https://formik.org/docs/guides/arrays#avoid-nesting\n  // We need to escape square brackets [ ] because it's also used by Lodash\n  // set array: https://lodash.com/docs/4.17.15#set, which is used by Formik.\n  // We need to escape ' because otherwise Formik will wrap the field name inside a ''\n  // for example, if we have hello'world, Formik will name the field 'hello'world'\n  const formikFieldName = `['${escapeCharacters(tableColumn.name)}']`\n\n  return (\n    <FormikField name={formikFieldName} validate={validate}>\n      {({ field, form }: any) =>\n        hidden ? (\n          <input {...field} ref={input} type=\"hidden\" />\n        ) : (\n          <TableColumnField\n            {...field}\n            type={type}\n            form={form}\n            tableColumn={tableColumn}\n            ref={input}\n            id={id}\n            error={getIn(form.touched, field.name) && getIn(form.errors, field.name)}\n            label={label}\n            placeholder={placeholder}\n            required={required}\n            hideLabel={hideLabel}\n          />\n        )\n      }\n    </FormikField>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAoH2B;AApH3B,mBAAkC;AAClC,oBAA4C;AAE5C,sCAAqC;AACrC,gCAA+B;AAC/B,gCAA+B;AAC/B,sCAAqC;AACrC,oCAAmC;AACnC,mCAAkC;AAClC,6BAA4B;AAC5B,2BAA0B;AAC1B,8BAA6B;AAC7B,mCAAkC;AAGlC,SAAS,4BAA4B,aAA6C,OAAe;AAC/F,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AACH,aAAO,GAAG,KAAK;AAAA,IAEjB,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL;AACE,aAAO,GAAG,KAAK;AAAA,EACnB;AACF;AAEA,SAAS,oBAAoB,aAA6C;AACxE,WAAS,eAAe,CAAC,GAAG,YAAY;AAAA,IACtC,KAAK;AACH,aAAO,gCAAAA;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,0BAAAC;AAAA,IAET,KAAK;AACH,aAAO,gCAAAC;AAAA,IAET,KAAK;AACH,aAAO,8BAAAC;AAAA,IAET,KAAK;AACH,aAAO,6BAAAC;AAAA,IAET,KAAK;AACH,aAAO,uBAAAC;AAAA,IAET,KAAK;AACH,aAAO,qBAAAC;AAAA,IAET,KAAK;AACH,aAAO,wBAAAC;AAAA,IAET;AACE,aAAO,gCAAAR;AAAA,EACX;AACF;AAmBA,SAAS,iBAAiB,QAAgB;AACxC,SAAO,OAAO,QAAQ,WAAW,MAAM;AACzC;AAEe,SAAR,MAAuB;AAAA,EAC5B;AAAA,EACA,gBAAgB;AAAA,IACd;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,SAAS;AAAA,IACT,OAAO;AAAA,IACP,YAAY;AAAA,EACd;AACF,GAAqB;AACnB,QAAM,mBAAmB,oBAAoB,WAAW;AACxD,QAAM,YAAQ,qBASZ,IAAI;AAEN,MAAI,CAAC;AAAa,WAAO,4CAAC,6BAAAS,SAAA,EAAsB;AAEhD,WAAS,WAAW;AAClB,QAAI;AAEJ,QAAI,MAAM,SAAS;AACjB,YAAM,EAAE,WAAW,CAAC,EAAmB,IAAI,MAAM;AAEjD,UAAI,SAAS;AAAc,uBAAe,GAAG,KAAK;AAElD,UAAI,SAAS;AAAc,uBAAe,4BAA4B,aAAa,KAAK;AAAA,IAC1F;AAEA,WAAO;AAAA,EACT;AASA,QAAM,kBAAkB,KAAK,iBAAiB,YAAY,IAAI,CAAC;AAE/D,SACE,4CAAC,cAAAC,OAAA,EAAY,MAAM,iBAAiB,UACjC,WAAC,EAAE,OAAO,KAAK,MACd,SACE,4CAAC,WAAO,GAAG,OAAO,KAAK,OAAO,MAAK,UAAS,IAE5C;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL;AAAA,MACA,WAAO,qBAAM,KAAK,SAAS,MAAM,IAAI,SAAK,qBAAM,KAAK,QAAQ,MAAM,IAAI;AAAA,MACvE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,EACF,GAGN;AAEJ;","names":["SingleLineTextTableField","LongTextTableField","CheckboxTableField","MultipleSelectTableField","SingleSelectTableField","PhoneNumberTableField","EmailTableField","URLTableField","NumberTableField","PlaceholderTableField","FormikField"]}

package/dist/cjs/components/builtin/Form/components/Placeholder/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref } from 'react'\n\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nfunction Label() {\n  return (\n    <div\n      className={useStyle({\n        maxWidth: 120,\n        minWidth: 60,\n        height: 8,\n        borderRadius: 2,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n        marginBottom: 8,\n      })}\n    />\n  )\n}\n\nfunction Input() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 80,\n        height: 32,\n        borderRadius: 4,\n        borderWidth: 2,\n        borderStyle: 'solid',\n        borderColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\nfunction Button() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 140,\n        height: 32,\n        borderRadius: 4,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): JSX.Element {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        className,\n      )}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n        <Button />\n      </div>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,iBAAmB;AACnB,mBAAgC;AAEhC,uBAAyB;AAEzB,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,SAAS;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACa;AACb,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,sDAAC,UAAO,GACV;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Placeholder/index.tsx"],"sourcesContent":["import { cx } from '@emotion/css'\nimport { forwardRef, Ref, ReactNode } from 'react'\n\nimport { useStyle } from '../../../../../runtimes/react/use-style'\n\nfunction Label() {\n  return (\n    <div\n      className={useStyle({\n        maxWidth: 120,\n        minWidth: 60,\n        height: 8,\n        borderRadius: 2,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n        marginBottom: 8,\n      })}\n    />\n  )\n}\n\nfunction Input() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 80,\n        height: 32,\n        borderRadius: 4,\n        borderWidth: 2,\n        borderStyle: 'solid',\n        borderColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\nfunction Button() {\n  return (\n    <div\n      className={useStyle({\n        minWidth: 140,\n        height: 32,\n        borderRadius: 4,\n        backgroundColor: '#a1a8c2',\n        opacity: 0.4,\n      })}\n    />\n  )\n}\n\ntype Props = {\n  className?: string\n  width?: string\n  margin?: string\n}\n\nexport default forwardRef(function Placeholder(\n  { className, width, margin }: Props,\n  ref: Ref<HTMLDivElement>,\n): ReactNode {\n  return (\n    <div\n      ref={ref}\n      className={cx(\n        useStyle({ display: 'flex', flexDirection: 'column' }),\n        width,\n        margin,\n        className,\n      )}\n    >\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', marginBottom: 16 }}>\n        <Label />\n        <Input />\n      </div>\n      <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>\n        <Button />\n      </div>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAPJ,iBAAmB;AACnB,mBAA2C;AAE3C,uBAAyB;AAEzB,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,QACT,cAAc;AAAA,MAChB,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,QAAQ;AACf,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAEA,SAAS,SAAS;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,cAAc;AAAA,QACd,iBAAiB;AAAA,QACjB,SAAS;AAAA,MACX,CAAC;AAAA;AAAA,EACH;AAEJ;AAQA,IAAO,0BAAQ,yBAAW,SAAS,YACjC,EAAE,WAAW,OAAO,OAAO,GAC3B,KACW;AACX,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,QAAQ,eAAe,SAAS,CAAC;AAAA,QACrD;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,qDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,cAAc,GAAG,GACvE;AAAA,sDAAC,SAAM;AAAA,UACP,4CAAC,SAAM;AAAA,WACT;AAAA,QACA,4CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,gBAAgB,WAAW,GACjF,sDAAC,UAAO,GACV;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":[]}

package/dist/cjs/components/builtin/Form/components/Spinner/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Spinner/index.tsx"],"sourcesContent":["import { keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { Spinner20 } from '../../../../icons/Spinner20'\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nexport default function Spinner(): JSX.Element {\n  return (\n    <Spinner20\n      className={useStyle({\n        display: 'inline-flex',\n        animation: `${spin} 1s linear infinite`,\n        stroke: 'currentColor',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAfJ,iBAA0B;AAC1B,uBAAyB;AACzB,uBAA0B;AAE1B,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE,SAAR,UAAwC;AAC7C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,SAAS;AAAA,QACT,WAAW,GAAG,IAAI;AAAA,QAClB,QAAQ;AAAA,MACV,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Form/components/Spinner/index.tsx"],"sourcesContent":["import { ReactNode } from 'react'\nimport { keyframes } from '@emotion/css'\nimport { useStyle } from '../../../../../runtimes/react/use-style'\nimport { Spinner20 } from '../../../../icons/Spinner20'\n\nconst spin = keyframes`\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n`\n\nexport default function Spinner(): ReactNode {\n  return (\n    <Spinner20\n      className={useStyle({\n        display: 'inline-flex',\n        animation: `${spin} 1s linear infinite`,\n        stroke: 'currentColor',\n      })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBI;AAfJ,iBAA0B;AAC1B,uBAAyB;AACzB,uBAA0B;AAE1B,MAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASE,SAAR,UAAsC;AAC3C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;AAAA,QAClB,SAAS;AAAA,QACT,WAAW,GAAG,IAAI;AAAA,QAClB,QAAQ;AAAA,MACV,CAAC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/cjs/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 } 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): JSX.Element {\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","Button","Navigation","Image","GutterContainer","DropDownButton","LinksPlaceholder","MobileMenu"]}
+{"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","Button","Navigation","Image","GutterContainer","DropDownButton","LinksPlaceholder","MobileMenu"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState } 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): JSX.Element {\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":["import_react","DropDownContainer","color","textStyle","Button"]}
+{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/DropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, ForwardedRef, forwardRef, useRef, useState, ReactNode } 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":["import_react","DropDownContainer","color","textStyle","Button"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../src/components/builtin/Navigation/components/LinksPlaceholder/index.tsx"],"sourcesContent":["import { 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): JSX.Element {\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAWI;AAVJ,uBAAyB;AACzB,6BAA4B;AAO5B,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;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,GAAuB;AACvE,SACE,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB,4CAAC,uBAAAA,SAAA,EAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,sDAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":["GutterContainer"]}
+{"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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAYI;AAVJ,uBAAyB;AACzB,6BAA4B;AAO5B,SAAS,gBAAgB,EAAE,OAAO,OAAO,GAAyB;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,2BAAS;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,2EACG,gBAAM,IAAI,CAAC,MAAM,MAChB,4CAAC,uBAAAA,SAAA,EAAwB,QAAgB,OAAO,MAAM,GAAG,MAAM,MAAM,MAAM,SAAS,GAClF,sDAAC,mBAAiB,GAAG,MAAM,KADP,CAEtB,CACD,GACH;AAEJ;","names":["GutterContainer"]}

package/dist/cjs/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState } from 'react'\n\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\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({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): JSX.Element {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AAsGM;AArIV,IAAAA,gBAAmD;AAInD,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}
+{"version":3,"sources":["../../../../../../../../../src/components/builtin/Navigation/components/MobileMenu/components/MobileDropDownButton/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, useState, ReactNode } from 'react'\n\nimport { LinkData, ResponsiveColorData, ResponsiveTextStyleData } from '@makeswift/prop-controllers'\n\nimport { colorToString } from '../../../../../../utils/colorToString'\nimport { useResponsiveColor } from '../../../../../../hooks'\n\nimport { CaretDown8 } from '../../../../../../icons/CaretDown8'\nimport { Plus8 } from '../../../../../../icons/Plus8'\nimport { ArrowDown8 } from '../../../../../../icons/ArrowDown8'\nimport { ChevronDown8 } from '../../../../../../icons/ChevronDown8'\n\nimport { Link } from '../../../../../../shared/Link'\nimport Button from '../../../../../Button'\nimport { cx } from '@emotion/css'\nimport { useStyle } from '../../../../../../../runtimes/react/use-style'\nimport {\n  useResponsiveStyle,\n  useResponsiveTextStyle,\n} from '../../../../../../utils/responsive-style'\n\ntype DropDownMenuBaseProps = {\n  className?: string\n  open: boolean\n}\n\ntype DropDownMenuProps = DropDownMenuBaseProps &\n  Omit<ComponentPropsWithoutRef<'div'>, keyof DropDownMenuBaseProps>\n\nfunction DropDownMenu({ className, open, ...restOfProps }: DropDownMenuProps) {\n  return (\n    <div\n      {...restOfProps}\n      className={cx(\n        useStyle({ display: open ? 'flex' : 'none', flexDirection: 'column', padding: 8 }),\n        className,\n      )}\n    />\n  )\n}\n\ntype ButtonLinkBaseProps = {\n  className?: string\n}\n\ntype ButtonLinkProps = ButtonLinkBaseProps &\n  Omit<ComponentPropsWithoutRef<typeof Button>, keyof ButtonLinkBaseProps>\n\nfunction ButtonLink({ className, ...restOfProps }: ButtonLinkProps) {\n  return <Button {...restOfProps} className={cx(useStyle({ margin: '8px 0' }), className)} />\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({ color, className, textStyle, ...restOfProps }: DropDownItemProps) {\n  const colorData = useResponsiveColor(color)\n\n  return (\n    <Link\n      {...restOfProps}\n      className={cx(\n        useStyle({\n          textDecoration: 'none',\n          lineHeight: 1.4,\n          padding: '8px 16px',\n          color: 'black',\n        }),\n        useStyle(useResponsiveTextStyle(textStyle)),\n        useStyle(\n          useResponsiveStyle([colorData] as const, ([color]) => ({\n            color: color == null ? 'black' : colorToString(color),\n          })),\n        ),\n        className,\n      )}\n    />\n  )\n}\n\ntype Props = Omit<ComponentPropsWithoutRef<typeof Button>, 'textColor' | 'color'> & {\n  label: string\n  links?: Array<{\n    id: string\n    payload: ComponentPropsWithoutRef<typeof DropDownItem> & {\n      link?: LinkData\n      label: string\n    }\n  }>\n  onClose?: () => unknown\n  caret?: string\n  textColor?: ResponsiveColorData\n  color?: ResponsiveColorData\n}\n\nexport default function MobileDropDownButton({\n  label,\n  caret,\n  links = [],\n  onClose = () => {},\n  color,\n  textColor,\n  ...restOfProps\n}: Props): ReactNode {\n  const [isOpen, setIsOpen] = useState(false)\n  return (\n    <>\n      <ButtonLink\n        {...restOfProps}\n        textColor={useResponsiveColor(textColor)}\n        color={useResponsiveColor(color)}\n        onPointerDown={() => setIsOpen(prev => !prev)}\n      >\n        <div style={{ display: 'flex', alignItems: 'center' }}>\n          <span style={{ marginRight: 6 }}>{label}</span>\n          <span style={{ display: 'inline-flex', fill: 'currentColor' }}>\n            <>\n              {caret === 'caret' && <CaretDown8 />}\n              {caret === 'plus' && <Plus8 />}\n              {caret === 'arrow-down' && <ArrowDown8 />}\n              {caret === 'chevron-down' && <ChevronDown8 />}\n            </>\n          </span>\n        </div>\n      </ButtonLink>\n      <DropDownMenu open={isOpen}>\n        {links.map(({ id, payload }) => (\n          <DropDownItem {...payload} key={id} onClick={onClose}>\n            {payload.label}\n          </DropDownItem>\n        ))}\n      </DropDownMenu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AAsGM;AArIV,IAAAA,gBAA8D;AAI9D,2BAA8B;AAC9B,mBAAmC;AAEnC,wBAA2B;AAC3B,mBAAsB;AACtB,wBAA2B;AAC3B,0BAA6B;AAE7B,kBAAqB;AACrB,oBAAmB;AACnB,iBAAmB;AACnB,uBAAyB;AACzB,8BAGO;AAUP,SAAS,aAAa,EAAE,WAAW,MAAM,GAAG,YAAY,GAAsB;AAC5E,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS,EAAE,SAAS,OAAO,SAAS,QAAQ,eAAe,UAAU,SAAS,EAAE,CAAC;AAAA,QACjF;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AASA,SAAS,WAAW,EAAE,WAAW,GAAG,YAAY,GAAoB;AAClE,SAAO,4CAAC,cAAAC,SAAA,EAAQ,GAAG,aAAa,eAAW,mBAAG,2BAAS,EAAE,QAAQ,QAAQ,CAAC,GAAG,SAAS,GAAG;AAC3F;AAWA,SAAS,aAAa,EAAE,OAAO,WAAW,WAAW,GAAG,YAAY,GAAsB;AACxF,QAAM,gBAAY,iCAAmB,KAAK;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,eAAW;AAAA,YACT,2BAAS;AAAA,UACP,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,SAAS;AAAA,UACT,OAAO;AAAA,QACT,CAAC;AAAA,YACD,+BAAS,gDAAuB,SAAS,CAAC;AAAA,YAC1C;AAAA,cACE,4CAAmB,CAAC,SAAS,GAAY,CAAC,CAACC,MAAK,OAAO;AAAA,YACrD,OAAOA,UAAS,OAAO,cAAU,oCAAcA,MAAK;AAAA,UACtD,EAAE;AAAA,QACJ;AAAA,QACA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ;AAiBe,SAAR,qBAAsC;AAAA,EAC3C;AAAA,EACA;AAAA,EACA,QAAQ,CAAC;AAAA,EACT,UAAU,MAAM;AAAA,EAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,QAAQ,SAAS,QAAI,wBAAS,KAAK;AAC1C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,eAAW,iCAAmB,SAAS;AAAA,QACvC,WAAO,iCAAmB,KAAK;AAAA,QAC/B,eAAe,MAAM,UAAU,UAAQ,CAAC,IAAI;AAAA,QAE5C,uDAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,YAAY,SAAS,GAClD;AAAA,sDAAC,UAAK,OAAO,EAAE,aAAa,EAAE,GAAI,iBAAM;AAAA,UACxC,4CAAC,UAAK,OAAO,EAAE,SAAS,eAAe,MAAM,eAAe,GAC1D,sFACG;AAAA,sBAAU,WAAW,4CAAC,gCAAW;AAAA,YACjC,UAAU,UAAU,4CAAC,sBAAM;AAAA,YAC3B,UAAU,gBAAgB,4CAAC,gCAAW;AAAA,YACtC,UAAU,kBAAkB,4CAAC,oCAAa;AAAA,aAC7C,GACF;AAAA,WACF;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,gBAAa,MAAM,QACjB,gBAAM,IAAI,CAAC,EAAE,IAAI,QAAQ,MACxB,gDAAC,gBAAc,GAAG,SAAS,KAAK,IAAI,SAAS,WAC1C,QAAQ,KACX,CACD,GACH;AAAA,KACF;AAEJ;","names":["import_react","Button","color"]}