: str_replace(): Passing null to parameter #2 ($replace) of type array|string is deprecated in
* If it's in our list of lowercase SVG tags, it's an SVG component
lowercaseSVGElements.indexOf(Component) > -1 ||
* If it contains a capital letter, it's an SVG component
/[A-Z]/u.test(Component)) {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs
const scaleCorrectors = {};
function addScaleCorrector(correctors) {
Object.assign(scaleCorrectors, correctors);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs
* Generate a list of every possible transform key.
const transformPropOrder = [
* A quick lookup for transform props.
const transformProps = new Set(transformPropOrder);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs
function isForcedMotionValue(key, { layout, layoutId }) {
return (transformProps.has(key) ||
key.startsWith("origin") ||
((layout || layoutId !== undefined) &&
(!!scaleCorrectors[key] || key === "opacity")));
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs
const isMotionValue = (value) => Boolean(value && value.getVelocity);
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs
transformPerspective: "perspective",
const numTransforms = transformPropOrder.length;
* Build a CSS transform style from individual x/y/scale etc properties.
* This outputs with a default order of transforms/scales/rotations, this can be customised by
* providing a transformTemplate function.
function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) {
// The transform string we're going to build into.
let transformString = "";
* Loop over all possible transforms in order, adding the ones that
* are present to the transform string.
for (let i = 0; i < numTransforms; i++) {
const key = transformPropOrder[i];
if (transform[key] !== undefined) {
const transformName = translateAlias[key] || key;
transformString += `${transformName}(${transform[key]}) `;
if (enableHardwareAcceleration && !transform.z) {
transformString += "translateZ(0)";
transformString = transformString.trim();
// If we have a custom `transform` template, pass our transform values and
// generated transformString to that before returning
transformString = transformTemplate(transform, transformIsDefault ? "" : transformString);
else if (allowTransformNone && transformIsDefault) {
transformString = "none";
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs
const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token);
const isCSSVariableName = checkStringStartsWith("--");
const startsAsVariableToken = checkStringStartsWith("var(--");
const isCSSVariableToken = (value) => {
const startsWithToken = startsAsVariableToken(value);
// Ensure any comments are stripped from the value as this can harm performance of the regex.
return singleCssVariableRegex.test(value.split("/*")[0].trim());
const singleCssVariableRegex = /var\(--(?:[\w-]+\s*|[\w-]+\s*,(?:\s*[^)(\s]|\s*\((?:[^)(]|\([^)(]*\))*\))+\s*)\)$/iu;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs
* Provided a value and a ValueType, returns the value as that value type.
const getValueAsType = (value, type) => {
return type && typeof value === "number"
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/clamp.mjs
const clamp_clamp = (min, max, v) => {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/index.mjs
test: (v) => typeof v === "number",
transform: (v) => clamp_clamp(0, 1, v),
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/utils.mjs
* TODO: When we move from string as a source of truth to data models
* everything in this folder should probably be referred to as models vs types
// If this number is a decimal, make it just five decimal places
const sanitize = (v) => Math.round(v * 100000) / 100000;
const floatRegex = /-?(?:\d+(?:\.\d+)?|\.\d+)/gu;
const colorRegex = /(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))/giu;
const singleColorRegex = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\((?:-?[\d.]+%?[,\s]+){2}-?[\d.]+%?\s*(?:[,/]\s*)?(?:\b\d+(?:\.\d+)?|\.\d+)?%?\))$/iu;
return typeof v === "string";
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/types/numbers/units.mjs
const createUnitType = (unit) => ({
test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
transform: (v) => `${v}${unit}`,
const degrees = createUnitType("deg");
const percent = createUnitType("%");
const px = createUnitType("px");
const vh = createUnitType("vh");
const vw = createUnitType("vw");
const progressPercentage = {
parse: (v) => percent.parse(v) / 100,
transform: (v) => percent.transform(v * 100),
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs
const numberValueTypes = {
borderTopRightRadius: px,
borderBottomRightRadius: px,
borderBottomLeftRadius: px,
transformPerspective: px,
originX: progressPercentage,
originY: progressPercentage,
numOctaves: type_int_int,
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs
function buildHTMLStyles(state, latestValues, options, transformTemplate) {
const { style, vars, transform, transformOrigin } = state;
// Track whether we encounter any transform or transformOrigin values.
let hasTransform = false;
let hasTransformOrigin = false;
// Does the calculated transform essentially equal "none"?
let transformIsNone = true;
* Loop over all our latest animated values and decide whether to handle them
* as a style or CSS variable.
* Transforms and transform origins are kept seperately for further processing.
for (const key in latestValues) {
const value = latestValues[key];
* If this is a CSS variable we don't do any further processing.
if (isCSSVariableName(key)) {
// Convert the value to its default value type, ie 0 -> "0px"
const valueType = numberValueTypes[key];
const valueAsType = getValueAsType(value, valueType);
if (transformProps.has(key)) {
// If this is a transform, flag to enable further transform processing
transform[key] = valueAsType;
// If we already know we have a non-default transform, early return
// Otherwise check to see if this is a default transform
if (value !== (valueType.default || 0))
else if (key.startsWith("origin")) {
// If this is a transform origin, flag and enable further transform-origin processing
hasTransformOrigin = true;
transformOrigin[key] = valueAsType;
style[key] = valueAsType;
if (!latestValues.transform) {
if (hasTransform || transformTemplate) {
style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate);
else if (style.transform) {
* If we have previously created a transform but currently don't have any,
* reset transform style to none.
style.transform = "none";
* Build a transformOrigin style. Uses the same defaults as the browser for
if (hasTransformOrigin) {
const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin;
style.transformOrigin = `${originX} ${originY} ${originZ}`;
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs
const createHtmlRenderState = () => ({
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-props.mjs
function copyRawValuesOnly(target, source, props) {
for (const key in source) {
if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) {
target[key] = source[key];
function useInitialMotionValues({ transformTemplate }, visualState, isStatic) {
return (0,external_React_.useMemo)(() => {
const state = createHtmlRenderState();
buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate);
return Object.assign({}, state.vars, state.style);
function useStyle(props, visualState, isStatic) {
const styleProp = props.style || {};
* Copy non-Motion Values straight into style
copyRawValuesOnly(style, styleProp, props);
Object.assign(style, useInitialMotionValues(props, visualState, isStatic));
function useHTMLProps(props, visualState, isStatic) {
// The `any` isn't ideal but it is the type of createElement props argument
const style = useStyle(props, visualState, isStatic);
if (props.drag && props.dragListener !== false) {
// Disable the ghost element when a user drags
htmlProps.draggable = false;
// Disable text selection
style.WebkitTouchCallout =
// Disable scrolling on the draggable direction
: `pan-${props.drag === "x" ? "y" : "x"}`;
if (props.tabIndex === undefined &&
(props.onTap || props.onTapStart || props.whileTap)) {
;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs
* A list of all valid MotionProps.
* This doesn't throw if a `MotionProp` name is missing - it should.
const validMotionProps = new Set([
"onMeasureDragConstraints",
* Check whether a prop name is a valid `MotionProp` key.
* @param key - Name of the property to check
* @returns `true` is key is a valid `MotionProp`.
function isValidMotionProp(key) {
return (key.startsWith("while") ||
(key.startsWith("drag") && key !== "draggable") ||
key.startsWith("layout") ||
key.startsWith("onTap") ||
key.startsWith("onPan") ||