polaris-react-extended 13.10.3

package/build/esm/types.js

@@ -0,0 +1,132 @@
+/* eslint-disable @shopify/strict-component-boundaries */
+
+/* eslint-enable @shopify/strict-component-boundaries */
+
+let Key = /*#__PURE__*/function (Key) {
+  Key[Key["Backspace"] = 8] = "Backspace";
+  Key[Key["Tab"] = 9] = "Tab";
+  Key[Key["Enter"] = 13] = "Enter";
+  Key[Key["Shift"] = 16] = "Shift";
+  Key[Key["Ctrl"] = 17] = "Ctrl";
+  Key[Key["Alt"] = 18] = "Alt";
+  Key[Key["Pause"] = 19] = "Pause";
+  Key[Key["CapsLock"] = 20] = "CapsLock";
+  Key[Key["Escape"] = 27] = "Escape";
+  Key[Key["Space"] = 32] = "Space";
+  Key[Key["PageUp"] = 33] = "PageUp";
+  Key[Key["PageDown"] = 34] = "PageDown";
+  Key[Key["End"] = 35] = "End";
+  Key[Key["Home"] = 36] = "Home";
+  Key[Key["LeftArrow"] = 37] = "LeftArrow";
+  Key[Key["UpArrow"] = 38] = "UpArrow";
+  Key[Key["RightArrow"] = 39] = "RightArrow";
+  Key[Key["DownArrow"] = 40] = "DownArrow";
+  Key[Key["Insert"] = 45] = "Insert";
+  Key[Key["Delete"] = 46] = "Delete";
+  Key[Key["Key0"] = 48] = "Key0";
+  Key[Key["Key1"] = 49] = "Key1";
+  Key[Key["Key2"] = 50] = "Key2";
+  Key[Key["Key3"] = 51] = "Key3";
+  Key[Key["Key4"] = 52] = "Key4";
+  Key[Key["Key5"] = 53] = "Key5";
+  Key[Key["Key6"] = 54] = "Key6";
+  Key[Key["Key7"] = 55] = "Key7";
+  Key[Key["Key8"] = 56] = "Key8";
+  Key[Key["Key9"] = 57] = "Key9";
+  Key[Key["KeyA"] = 65] = "KeyA";
+  Key[Key["KeyB"] = 66] = "KeyB";
+  Key[Key["KeyC"] = 67] = "KeyC";
+  Key[Key["KeyD"] = 68] = "KeyD";
+  Key[Key["KeyE"] = 69] = "KeyE";
+  Key[Key["KeyF"] = 70] = "KeyF";
+  Key[Key["KeyG"] = 71] = "KeyG";
+  Key[Key["KeyH"] = 72] = "KeyH";
+  Key[Key["KeyI"] = 73] = "KeyI";
+  Key[Key["KeyJ"] = 74] = "KeyJ";
+  Key[Key["KeyK"] = 75] = "KeyK";
+  Key[Key["KeyL"] = 76] = "KeyL";
+  Key[Key["KeyM"] = 77] = "KeyM";
+  Key[Key["KeyN"] = 78] = "KeyN";
+  Key[Key["KeyO"] = 79] = "KeyO";
+  Key[Key["KeyP"] = 80] = "KeyP";
+  Key[Key["KeyQ"] = 81] = "KeyQ";
+  Key[Key["KeyR"] = 82] = "KeyR";
+  Key[Key["KeyS"] = 83] = "KeyS";
+  Key[Key["KeyT"] = 84] = "KeyT";
+  Key[Key["KeyU"] = 85] = "KeyU";
+  Key[Key["KeyV"] = 86] = "KeyV";
+  Key[Key["KeyW"] = 87] = "KeyW";
+  Key[Key["KeyX"] = 88] = "KeyX";
+  Key[Key["KeyY"] = 89] = "KeyY";
+  Key[Key["KeyZ"] = 90] = "KeyZ";
+  Key[Key["LeftMeta"] = 91] = "LeftMeta";
+  Key[Key["RightMeta"] = 92] = "RightMeta";
+  Key[Key["Select"] = 93] = "Select";
+  Key[Key["Numpad0"] = 96] = "Numpad0";
+  Key[Key["Numpad1"] = 97] = "Numpad1";
+  Key[Key["Numpad2"] = 98] = "Numpad2";
+  Key[Key["Numpad3"] = 99] = "Numpad3";
+  Key[Key["Numpad4"] = 100] = "Numpad4";
+  Key[Key["Numpad5"] = 101] = "Numpad5";
+  Key[Key["Numpad6"] = 102] = "Numpad6";
+  Key[Key["Numpad7"] = 103] = "Numpad7";
+  Key[Key["Numpad8"] = 104] = "Numpad8";
+  Key[Key["Numpad9"] = 105] = "Numpad9";
+  Key[Key["Multiply"] = 106] = "Multiply";
+  Key[Key["Add"] = 107] = "Add";
+  Key[Key["Subtract"] = 109] = "Subtract";
+  Key[Key["Decimal"] = 110] = "Decimal";
+  Key[Key["Divide"] = 111] = "Divide";
+  Key[Key["F1"] = 112] = "F1";
+  Key[Key["F2"] = 113] = "F2";
+  Key[Key["F3"] = 114] = "F3";
+  Key[Key["F4"] = 115] = "F4";
+  Key[Key["F5"] = 116] = "F5";
+  Key[Key["F6"] = 117] = "F6";
+  Key[Key["F7"] = 118] = "F7";
+  Key[Key["F8"] = 119] = "F8";
+  Key[Key["F9"] = 120] = "F9";
+  Key[Key["F10"] = 121] = "F10";
+  Key[Key["F11"] = 122] = "F11";
+  Key[Key["F12"] = 123] = "F12";
+  Key[Key["NumLock"] = 144] = "NumLock";
+  Key[Key["ScrollLock"] = 145] = "ScrollLock";
+  Key[Key["Semicolon"] = 186] = "Semicolon";
+  Key[Key["Equals"] = 187] = "Equals";
+  Key[Key["Comma"] = 188] = "Comma";
+  Key[Key["Dash"] = 189] = "Dash";
+  Key[Key["Period"] = 190] = "Period";
+  Key[Key["ForwardSlash"] = 191] = "ForwardSlash";
+  Key[Key["GraveAccent"] = 192] = "GraveAccent";
+  Key[Key["OpenBracket"] = 219] = "OpenBracket";
+  Key[Key["BackSlash"] = 220] = "BackSlash";
+  Key[Key["CloseBracket"] = 221] = "CloseBracket";
+  Key[Key["SingleQuote"] = 222] = "SingleQuote";
+  return Key;
+}({});
+
+/**
+ * Useful for defining mutually exclusive props such as:
+ *
+ * interface MessageBasics {
+ *   timestamp?: number;
+ * }
+ * interface MessageWithText extends MessageBasics {
+ *   text: string;
+ * }
+ * interface MessageWithAttachment extends MessageBasics {
+ *   attachment: string;
+ * }
+ * type Message =
+ *   | (MessageWithText & Never<MessageWithAttachment>)
+ *   | (MessageWithAttachment & Never<MessageWithText>);
+ *
+ * // 👍 OK
+ * let foo: Message = {attachment: 'a'}
+ * let bar: Message = {text: 'b'}
+ *
+ * // ❌ ERROR: Type '{ attachment: string; text: string; }' is not assignable to type 'Message'.
+ * let baz: Message = {attachment: 'a', text: 'b'}
+ */
+
+export { Key };

package/build/esm/utilities/arrays.js

@@ -0,0 +1,14 @@
+function arraysAreEqual(firstArray, secondArray, comparator) {
+  if (firstArray.length !== secondArray.length) {
+    return false;
+  }
+  return firstArray.every((firstItem, index) => {
+    const secondItem = secondArray[index];
+    if (comparator != null) {
+      return comparator(firstItem, secondItem);
+    }
+    return firstItem === secondItem;
+  });
+}
+
+export { arraysAreEqual };

package/build/esm/utilities/autocomplete/context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const MappedActionContext = /*#__PURE__*/createContext({});
+
+export { MappedActionContext };

package/build/esm/utilities/banner-context.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const BannerContext = /*#__PURE__*/createContext(false);
+
+export { BannerContext };

package/build/esm/utilities/breakpoints.js

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { themeDefault, getMediaConditions } from '@shopify/polaris-tokens';
+import { isServer } from './target.js';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+
+const Breakpoints = {
+  // TODO: Update to smDown
+  navigationBarCollapsed: '767.95px',
+  // TODO: Update to lgDown
+  stackedContent: '1039.95px'
+};
+const noWindowMatches = {
+  media: '',
+  addListener: noop,
+  removeListener: noop,
+  matches: false,
+  onchange: noop,
+  addEventListener: noop,
+  removeEventListener: noop,
+  dispatchEvent: _ => true
+};
+function noop() {}
+function navigationBarCollapsed() {
+  return isServer ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.navigationBarCollapsed})`);
+}
+function stackedContent() {
+  return isServer ? noWindowMatches : window.matchMedia(`(max-width: ${Breakpoints.stackedContent})`);
+}
+
+/**
+ * Directional alias for each Polaris `breakpoints` token.
+ *
+ * @example 'smUp' | 'smDown' | 'smOnly' | 'mdUp' | etc.
+ */
+
+/**
+ * Match results for each directional Polaris `breakpoints` alias.
+ */
+
+const hookCallbacks = new Set();
+const breakpointsQueryEntries = getBreakpointsQueryEntries(themeDefault.breakpoints);
+if (!isServer) {
+  breakpointsQueryEntries.forEach(([breakpointAlias, query]) => {
+    const eventListener = event => {
+      for (const hookCallback of hookCallbacks) {
+        hookCallback(breakpointAlias, event.matches);
+      }
+    };
+    const mql = window.matchMedia(query);
+    if (mql.addListener) {
+      mql.addListener(eventListener);
+    } else {
+      mql.addEventListener('change', eventListener);
+    }
+  });
+}
+function getDefaultMatches(defaults) {
+  return Object.fromEntries(breakpointsQueryEntries.map(([directionAlias]) => [directionAlias, typeof defaults === 'boolean' ? defaults : defaults?.[directionAlias] ?? false]));
+}
+function getLiveMatches() {
+  return Object.fromEntries(breakpointsQueryEntries.map(([directionAlias, query]) => [directionAlias, window.matchMedia(query).matches]));
+}
+/**
+ * Retrieves media query matches for each directional Polaris `breakpoints` alias.
+ *
+ * @example
+ * const {smUp} = useBreakpoints();
+ * return smUp && 'Hello world';
+ *
+ * @example
+ * const {mdUp} = useBreakpoints({defaults: {mdUp: true}});
+ * mdUp //=> `true` during SSR
+ *
+ * @example
+ * const breakpoints = useBreakpoints({defaults: true});
+ * breakpoints //=> All values will be `true` during SSR
+ */
+function useBreakpoints(options) {
+  // On SSR, and initial CSR, we force usage of the defaults to avoid a
+  // hydration mismatch error.
+  // Later, in the effect, we will call this again on the client side without
+  // any defaults to trigger a more accurate client side evaluation.
+  const [breakpoints, setBreakpoints] = useState(getDefaultMatches(options?.defaults));
+  useIsomorphicLayoutEffect(() => {
+    // Now that we're client side, get the real values
+    setBreakpoints(getLiveMatches());
+
+    // Register a callback to set the breakpoints object whenever there's a
+    // change in the future
+    const callback = (breakpointAlias, matches) => {
+      setBreakpoints(prevBreakpoints => ({
+        ...prevBreakpoints,
+        [breakpointAlias]: matches
+      }));
+    };
+    hookCallbacks.add(callback);
+    return () => {
+      hookCallbacks.delete(callback);
+    };
+  }, []);
+  return breakpoints;
+}
+
+/**
+ * Converts `breakpoints` tokens into directional media query entries.
+ *
+ * @example
+ * const breakpointsQueryEntries = getBreakpointsQueryEntries(breakpoints);
+ * breakpointsQueryEntries === [
+ *   ['xsUp', '(min-width: ...)'],
+ *   ['xsDown', '(max-width: ...)'],
+ *   ['xsOnly', '(min-width: ...) and (max-width: ...)'],
+ *   ['smUp', '(min-width: ...) and (max-width: ...)'],
+ *   ['mdUp', '(min-width: ...) and (max-width: ...)'],
+ *   // etc.
+ * ]
+ */
+function getBreakpointsQueryEntries(breakpoints) {
+  const mediaConditionEntries = Object.entries(getMediaConditions(breakpoints));
+  return mediaConditionEntries.map(([breakpointsToken, mediaConditions]) => Object.entries(mediaConditions).map(([direction, mediaCondition]) => {
+    const breakpointsAlias = breakpointsToken.split('-')[1];
+
+    // e.g. smUp, smDown, smOnly, etc.
+    const directionAlias = `${breakpointsAlias}${capitalize(direction)}`;
+    return [directionAlias, mediaCondition];
+  })).flat();
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export { getBreakpointsQueryEntries, navigationBarCollapsed, stackedContent, useBreakpoints };

package/build/esm/utilities/capitalize.js

@@ -0,0 +1,6 @@
+function capitalize(word = '') {
+  const wordLower = word.toLowerCase();
+  return wordLower.charAt(0).toUpperCase() + wordLower.slice(1);
+}
+
+export { capitalize };

package/build/esm/utilities/clamp.js

@@ -0,0 +1,7 @@
+function clamp(number, min, max) {
+  if (number < min) return min;
+  if (number > max) return max;
+  return number;
+}
+
+export { clamp };

package/build/esm/utilities/color-transformers.js

@@ -0,0 +1,223 @@
+import { clamp } from './clamp.js';
+import { roundNumberToDecimalPlaces } from './roundNumberToDecimalPlaces.js';
+
+function rgbString(color) {
+  const {
+    red,
+    green,
+    blue
+  } = color;
+  if ('alpha' in color) {
+    return `rgba(${red}, ${green}, ${blue}, ${color.alpha})`;
+  } else {
+    return `rgb(${red}, ${green}, ${blue})`;
+  }
+}
+const rgbaString = rgbString;
+function rgbToHex({
+  red,
+  green,
+  blue
+}) {
+  return `#${componentToHex(red)}${componentToHex(green)}${componentToHex(blue)}`;
+}
+function componentToHex(component) {
+  const hex = component.toString(16);
+  return hex.length === 1 ? `0${hex}` : hex;
+}
+function hsbToHex(color) {
+  return rgbToHex(hsbToRgb(color));
+}
+function rgbFromHueAndChroma(hue, chroma) {
+  const huePrime = hue / 60;
+  const hueDelta = 1 - Math.abs(huePrime % 2 - 1);
+  const intermediateValue = chroma * hueDelta;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (huePrime >= 0 && huePrime <= 1) {
+    red = chroma;
+    green = intermediateValue;
+    blue = 0;
+  }
+  if (huePrime >= 1 && huePrime <= 2) {
+    red = intermediateValue;
+    green = chroma;
+    blue = 0;
+  }
+  if (huePrime >= 2 && huePrime <= 3) {
+    red = 0;
+    green = chroma;
+    blue = intermediateValue;
+  }
+  if (huePrime >= 3 && huePrime <= 4) {
+    red = 0;
+    green = intermediateValue;
+    blue = chroma;
+  }
+  if (huePrime >= 4 && huePrime <= 5) {
+    red = intermediateValue;
+    green = 0;
+    blue = chroma;
+  }
+  if (huePrime >= 5 && huePrime <= 6) {
+    red = chroma;
+    green = 0;
+    blue = intermediateValue;
+  }
+  return {
+    red,
+    green,
+    blue
+  };
+}
+
+// implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
+
+function hsbToRgb(color) {
+  const {
+    hue,
+    saturation,
+    brightness,
+    alpha = 1
+  } = color;
+  const chroma = brightness * saturation;
+  let {
+    red,
+    green,
+    blue
+  } = rgbFromHueAndChroma(hue, chroma);
+  const chromaBrightnessDelta = brightness - chroma;
+  red += chromaBrightnessDelta;
+  green += chromaBrightnessDelta;
+  blue += chromaBrightnessDelta;
+  return {
+    red: Math.round(red * 255),
+    green: Math.round(green * 255),
+    blue: Math.round(blue * 255),
+    alpha
+  };
+}
+
+// implements https://en.wikipedia.org/wiki/HSL_and_HSV#From_HSV
+
+function hslToRgb(color) {
+  const {
+    hue,
+    saturation,
+    lightness,
+    alpha = 1
+  } = color;
+  const chroma = (1 - Math.abs(2 * (lightness / 100) - 1)) * (saturation / 100);
+  let {
+    red,
+    green,
+    blue
+  } = rgbFromHueAndChroma(hue, chroma);
+  const lightnessVal = lightness / 100 - chroma / 2;
+  red += lightnessVal;
+  green += lightnessVal;
+  blue += lightnessVal;
+  return {
+    red: Math.round(red * 255),
+    green: Math.round(green * 255),
+    blue: Math.round(blue * 255),
+    alpha
+  };
+}
+
+// ref https://en.wikipedia.org/wiki/HSL_and_HSV
+function rgbToHsbl(color, type = 'b') {
+  const {
+    alpha = 1
+  } = color;
+  const red = color.red / 255;
+  const green = color.green / 255;
+  const blue = color.blue / 255;
+  const largestComponent = Math.max(red, green, blue);
+  const smallestComponent = Math.min(red, green, blue);
+  const delta = largestComponent - smallestComponent;
+  const lightness = (largestComponent + smallestComponent) / 2;
+  let saturation = 0;
+  if (largestComponent === 0) {
+    saturation = 0;
+  } else if (type === 'b') {
+    saturation = delta / largestComponent;
+  } else if (type === 'l') {
+    const baseSaturation = lightness > 0.5 ? delta / (2 - largestComponent - smallestComponent) : delta / (largestComponent + smallestComponent);
+    saturation = isNaN(baseSaturation) ? 0 : baseSaturation;
+  }
+  let huePercentage = 0;
+  switch (largestComponent) {
+    case red:
+      huePercentage = (green - blue) / delta + (green < blue ? 6 : 0);
+      break;
+    case green:
+      huePercentage = (blue - red) / delta + 2;
+      break;
+    case blue:
+      huePercentage = (red - green) / delta + 4;
+  }
+  const hue = huePercentage / 6 * 360;
+  const clampedHue = clamp(hue, 0, 360);
+  return {
+    hue: clampedHue ? roundNumberToDecimalPlaces(clampedHue, 2) : 0,
+    saturation: roundNumberToDecimalPlaces(clamp(saturation, 0, 1), 4),
+    brightness: roundNumberToDecimalPlaces(clamp(largestComponent, 0, 1), 4),
+    lightness: roundNumberToDecimalPlaces(lightness, 4),
+    alpha: roundNumberToDecimalPlaces(alpha, 4)
+  };
+}
+function rgbToHsb(color) {
+  const {
+    hue,
+    saturation,
+    brightness,
+    alpha = 1
+  } = rgbToHsbl(color, 'b');
+  return {
+    hue,
+    saturation,
+    brightness,
+    alpha
+  };
+}
+function rgbToHsl(color) {
+  const {
+    hue,
+    saturation: rawSaturation,
+    lightness: rawLightness,
+    alpha = 1
+  } = rgbToHsbl(color, 'l');
+  const saturation = roundNumberToDecimalPlaces(rawSaturation * 100, 2);
+  const lightness = roundNumberToDecimalPlaces(rawLightness * 100, 2);
+  return {
+    hue,
+    saturation,
+    lightness,
+    alpha
+  };
+}
+function hexToRgb(color) {
+  if (color.length === 4) {
+    const repeatHex = (hex1, hex2) => color.slice(hex1, hex2).repeat(2);
+    const red = parseInt(repeatHex(1, 2), 16);
+    const green = parseInt(repeatHex(2, 3), 16);
+    const blue = parseInt(repeatHex(3, 4), 16);
+    return {
+      red,
+      green,
+      blue
+    };
+  }
+  const red = parseInt(color.slice(1, 3), 16);
+  const green = parseInt(color.slice(3, 5), 16);
+  const blue = parseInt(color.slice(5, 7), 16);
+  return {
+    red,
+    green,
+    blue
+  };
+}
+
+export { hexToRgb, hsbToHex, hsbToRgb, hslToRgb, rgbString, rgbToHex, rgbToHsb, rgbToHsl, rgbaString };

package/build/esm/utilities/combobox/context.js

@@ -0,0 +1,7 @@
+import { createContext } from 'react';
+
+const ComboboxTextFieldContext = /*#__PURE__*/createContext(undefined);
+const ComboboxListboxContext = /*#__PURE__*/createContext({});
+const ComboboxListboxOptionContext = /*#__PURE__*/createContext({});
+
+export { ComboboxListboxContext, ComboboxListboxOptionContext, ComboboxTextFieldContext };

package/build/esm/utilities/combobox/hooks.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { ComboboxListboxContext, ComboboxTextFieldContext } from './context.js';
+
+function useComboboxTextField() {
+  const context = useContext(ComboboxTextFieldContext);
+  if (!context) {
+    throw new Error('No Combobox was provided. Your component must be wrapped in a <Combobox> component.');
+  }
+  return context;
+}
+function useComboboxListbox() {
+  const context = useContext(ComboboxListboxContext);
+  return context;
+}
+
+export { useComboboxListbox, useComboboxTextField };

package/build/esm/utilities/components.js

@@ -0,0 +1,59 @@
+import React, { isValidElement, Children } from 'react';
+
+// Wraps `element` in `Component`, if it is not already an instance of
+// `Component`. If `props` is passed, those will be added as props on the
+// wrapped component. If `element` is null, the component is not wrapped.
+function wrapWithComponent(element, Component, props) {
+  if (element == null) {
+    return null;
+  }
+  return isElementOfType(element, Component) ? element : /*#__PURE__*/React.createElement(Component, props, element);
+}
+
+// In development, we compare based on the name of the function because
+// React Hot Loader proxies React components in order to make updates. In
+// production we can simply compare the components for equality.
+const isComponent = process.env.NODE_ENV === 'development' ? hotReloadComponentCheck : (AComponent, AnotherComponent) => AComponent === AnotherComponent;
+
+// Checks whether `element` is a React element of type `Component` (or one of
+// the passed components, if `Component` is an array of React components).
+function isElementOfType(element, Component) {
+  if (element == null || ! /*#__PURE__*/isValidElement(element) || typeof element.type === 'string') {
+    return false;
+  }
+  const {
+    type: defaultType
+  } = element;
+  // Type override allows components to bypass default wrapping behavior. Ex: Stack, ResourceList...
+  // See https://github.com/Shopify/app-extension-libs/issues/996#issuecomment-710437088
+  const overrideType = element.props?.__type__;
+  const type = overrideType || defaultType;
+  const Components = Array.isArray(Component) ? Component : [Component];
+  return Components.some(AComponent => typeof type !== 'string' && isComponent(AComponent, type));
+}
+
+// Returns all children that are valid elements as an array. Can optionally be
+// filtered by passing `predicate`.
+function elementChildren(children, predicate = () => true) {
+  return Children.toArray(children).filter(child => /*#__PURE__*/isValidElement(child) && predicate(child));
+}
+function ConditionalWrapper({
+  condition,
+  wrapper,
+  children
+}) {
+  return condition ? wrapper(children) : children;
+}
+function ConditionalRender({
+  condition,
+  children
+}) {
+  return condition ? children : null;
+}
+function hotReloadComponentCheck(AComponent, AnotherComponent) {
+  const componentName = AComponent.name;
+  const anotherComponentName = AnotherComponent.displayName;
+  return AComponent === AnotherComponent || Boolean(componentName) && componentName === anotherComponentName;
+}
+
+export { ConditionalRender, ConditionalWrapper, elementChildren, isElementOfType, wrapWithComponent };

package/build/esm/utilities/css.js

@@ -0,0 +1,57 @@
+import { breakpointsAliases } from '@shopify/polaris-tokens';
+import { isObject } from './is-object.js';
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ');
+}
+function variationName(name, value) {
+  return `${name}${value.charAt(0).toUpperCase()}${value.slice(1)}`;
+}
+function sanitizeCustomProperties(styles) {
+  const nonNullValues = Object.entries(styles).filter(([_, value]) => value != null);
+  return nonNullValues.length ? Object.fromEntries(nonNullValues) : undefined;
+}
+
+/**
+ * Given params like so:
+ * (
+ *   'button',
+ *   'padding',
+ *   'spacing',
+ *   {
+ *     sm: "4",
+ *     lg: "6"
+ *   }
+ * )
+ * Converts it to an object like so:
+ * {
+ *   '--pc-button-padding-sm': 'var(--p-spacing-4)',
+ *   '--pc-button-padding-lg': 'var(--p-spacing-6)'
+ * }
+ *
+ */
+function getResponsiveProps(componentName, componentProp, tokenSubgroup, responsiveProp) {
+  if (!responsiveProp) return {};
+  let result;
+  if (!isObject(responsiveProp)) {
+    result = {
+      [breakpointsAliases[0]]: `var(--p-${tokenSubgroup}-${responsiveProp})`
+    };
+  } else {
+    result = Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, aliasOrScale]) => [breakpointAlias, `var(--p-${tokenSubgroup}-${aliasOrScale})`]));
+  }
+
+  // Prefix each responsive key with the correct token name
+  return Object.fromEntries(Object.entries(result).map(([breakpointAlias, value]) => [`--pc-${componentName}-${componentProp}-${breakpointAlias}`, value]));
+}
+function getResponsiveValue(componentName, componentProp, responsiveProp) {
+  if (!responsiveProp) return {};
+  if (!isObject(responsiveProp)) {
+    return {
+      [`--pc-${componentName}-${componentProp}-${breakpointsAliases[0]}`]: responsiveProp
+    };
+  }
+  return Object.fromEntries(Object.entries(responsiveProp).map(([breakpointAlias, responsiveValue]) => [`--pc-${componentName}-${componentProp}-${breakpointAlias}`, responsiveValue]));
+}
+
+export { classNames, getResponsiveProps, getResponsiveValue, sanitizeCustomProperties, variationName };