How to use the sku/treat.styleMap function in sku

borderFormHover: {
      boxShadow: `inset 0 0 0 ${borderWidth.standard}px ${color.formHover}`,
    },
    borderFormAccent: {
      boxShadow: `inset 0 0 0 ${borderWidth.standard}px ${color.formAccent}`,
    },
    borderFormAccentLarge: {
      boxShadow: `inset 0 0 0 ${borderWidth.large}px ${color.formAccent}`,
    },
    borderStandardInvertedLarge: {
      boxShadow: `inset 0 0 0 ${borderWidth.large}px ${color.standardInverted}`,
    },
  }),
);

export const cursor = styleMap({
  pointer: { cursor: 'pointer' },
});

export const pointerEvents = styleMap({
  none: { pointerEvents: 'none' },
});

const textAlignRules = {
  left: 'left',
  center: 'center',
  right: 'right',
};

export const textAlign = styleMap(
  mapToStyleProperty(textAlignRules, 'textAlign'),
);

tablet: tablet.cropFirstLine,
    }),
  };
};

export const text = {
  xsmall: styleMap(theme =>
    makeTypographyRules(theme.typography.text.xsmall, theme),
  ),
  small: styleMap(theme =>
    makeTypographyRules(theme.typography.text.small, theme),
  ),
  standard: styleMap(theme =>
    makeTypographyRules(theme.typography.text.standard, theme),
  ),
  large: styleMap(theme =>
    makeTypographyRules(theme.typography.text.large, theme),
  ),
};

export const headingWeight = styleMap(({ typography }) =>
  mapValues(typography.heading.weight, weight => ({
    fontWeight: typography.fontWeight[weight],
  })),
);

export const heading = {
  '1': styleMap(theme =>
    makeTypographyRules(theme.typography.heading.level['1'], theme),
  ),
  '2': styleMap(theme =>
    makeTypographyRules(theme.typography.heading.level['2'], theme),

export const margin = {
  top: styleMap(theme => spaceMapToCss(theme, 'marginTop', 'mobile')),
  bottom: styleMap(theme => spaceMapToCss(theme, 'marginBottom', 'mobile')),
  left: styleMap(theme => spaceMapToCss(theme, 'marginLeft', 'mobile')),
  right: styleMap(theme => spaceMapToCss(theme, 'marginRight', 'mobile')),
};
export const marginTablet = {
  top: styleMap(theme => spaceMapToCss(theme, 'marginTop', 'tablet')),
  bottom: styleMap(theme => spaceMapToCss(theme, 'marginBottom', 'tablet')),
  left: styleMap(theme => spaceMapToCss(theme, 'marginLeft', 'tablet')),
  right: styleMap(theme => spaceMapToCss(theme, 'marginRight', 'tablet')),
};
export const marginDesktop = {
  top: styleMap(theme => spaceMapToCss(theme, 'marginTop', 'desktop')),
  bottom: styleMap(theme => spaceMapToCss(theme, 'marginBottom', 'desktop')),
  left: styleMap(theme => spaceMapToCss(theme, 'marginLeft', 'desktop')),
  right: styleMap(theme => spaceMapToCss(theme, 'marginRight', 'desktop')),
};

export const padding = {
  top: styleMap(theme => spaceMapToCss(theme, 'paddingTop', 'mobile')),
  bottom: styleMap(theme => spaceMapToCss(theme, 'paddingBottom', 'mobile')),
  left: styleMap(theme => spaceMapToCss(theme, 'paddingLeft', 'mobile')),
  right: styleMap(theme => spaceMapToCss(theme, 'paddingRight', 'mobile')),
};
export const paddingTablet = {
  top: styleMap(theme => spaceMapToCss(theme, 'paddingTop', 'tablet')),
  bottom: styleMap(theme => spaceMapToCss(theme, 'paddingBottom', 'tablet')),
  left: styleMap(theme => spaceMapToCss(theme, 'paddingLeft', 'tablet')),
  right: styleMap(theme => spaceMapToCss(theme, 'paddingRight', 'tablet')),
};

responsiveStyle({
          desktop: { [propertyName]: value },
        }),
    ),
);

const flexDirectionRules = {
  row: 'row',
  rowReverse: 'row-reverse',
  column: 'column',
  columnReverse: 'column-reverse',
};
export const flexDirection = styleMap(
  mapToStyleProperty(flexDirectionRules, 'flexDirection'),
);
export const flexDirectionTablet = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(
    flexDirectionRules,
    'flexDirection',
    (value, propertyName) =>
      responsiveStyle({
        tablet: { [propertyName]: value },
      }),
  ),
);
export const flexDirectionDesktop = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(
    flexDirectionRules,
    'flexDirection',
    (value, propertyName) =>
      responsiveStyle({
        desktop: { [propertyName]: value },

};
export const width = {
  ...styleMap(mapToStyleProperty(widthRules, 'width'), 'width'),
  ...styleMap(
    theme => ({
      touchable: { width: theme.grid * theme.touchableSize },
    }),
    'width',
  ),
};

const heightRules = {
  full: '100%',
};
export const height = {
  ...styleMap(mapToStyleProperty(heightRules, 'height'), 'height'),
  ...styleMap(
    theme => ({
      touchable: { height: theme.grid * theme.touchableSize },
    }),
    'height',
  ),
};

const positionRules = {
  absolute: 'absolute',
  relative: 'relative',
  fixed: 'fixed',
};
export const position = styleMap(mapToStyleProperty(positionRules, 'position'));

const displayRules = {

export const cancelButton = style({
  top: 0,
  right: 0,
});

export const backdrop = style({
  top: 0,
  left: 0,
  width: '100vw',
  height: '100vh',
  zIndex: zIndex.backdrop,
  background: 'black',
});

export const backdropVisibility = styleMap({
  hidden: { opacity: 0 },
  visible: { opacity: 0.7 },
});

const menuBase = style({
  overflowY: 'auto',
  zIndex: zIndex.pageOverlay,
});
const menuHeight = style(({ utils, grid, touchableSize, space }) => {
  const calcMenuHeight = (numSuggestions: number) =>
    grid * (touchableSize * numSuggestions + space.xxsmall);

  return utils.responsiveStyle({
    mobile: {
      maxHeight: calcMenuHeight(6),
    },

const alignItemsRules = {
  flexStart: 'flex-start',
  center: 'center',
  flexEnd: 'flex-end',
};
export const alignItems = styleMap(
  mapToStyleProperty(alignItemsRules, 'alignItems'),
);
export const alignItemsTablet = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(alignItemsRules, 'alignItems', (value, propertyName) =>
    responsiveStyle({
      tablet: { [propertyName]: value },
    }),
  ),
);
export const alignItemsDesktop = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(alignItemsRules, 'alignItems', (value, propertyName) =>
    responsiveStyle({
      desktop: { [propertyName]: value },
    }),
  ),
);

const justifyContentRules = {
  flexStart: 'flex-start',
  center: 'center',
  flexEnd: 'flex-end',
  spaceBetween: 'space-between',
};
export const justifyContent = styleMap(
  mapToStyleProperty(justifyContentRules, 'justifyContent'),
);

),
);
export const displayDesktop = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(displayRules, 'display', (value, propertyName) =>
    responsiveStyle({
      desktop: { [propertyName]: value },
    }),
  ),
);

const alignItemsRules = {
  flexStart: 'flex-start',
  center: 'center',
  flexEnd: 'flex-end',
};
export const alignItems = styleMap(
  mapToStyleProperty(alignItemsRules, 'alignItems'),
);
export const alignItemsTablet = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(alignItemsRules, 'alignItems', (value, propertyName) =>
    responsiveStyle({
      tablet: { [propertyName]: value },
    }),
  ),
);
export const alignItemsDesktop = styleMap(({ utils: { responsiveStyle } }) =>
  mapToStyleProperty(alignItemsRules, 'alignItems', (value, propertyName) =>
    responsiveStyle({
      desktop: { [propertyName]: value },
    }),
  ),
);

promoteLight: {
    neutral: accessibleColorVariants.promote,
    promote: accessibleColorVariants.promote,
  },
};

const makeTouchableSpacing = (touchableHeight: number, textHeight: number) => {
  const space = (touchableHeight - textHeight) / 2;

  return {
    paddingTop: space,
    paddingBottom: space,
  };
};

export const touchable = styleMap(
  ({ grid, typography, touchableSize, utils }) =>
    mapValues(typography.text, textDefinition =>
      utils.responsiveStyle({
        mobile: makeTouchableSpacing(
          grid * touchableSize,
          grid * textDefinition.mobile.rows,
        ),
        tablet: makeTouchableSpacing(
          grid * touchableSize,
          grid * textDefinition.tablet.rows,
        ),
      }),
    ),
);

export const width = {
  ...styleMap(mapToStyleProperty(widthRules, 'width'), 'width'),
  ...styleMap(
    theme => ({
      touchable: { width: theme.grid * theme.touchableSize },
    }),
    'width',
  ),
};

const heightRules = {
  full: '100%',
};
export const height = {
  ...styleMap(mapToStyleProperty(heightRules, 'height'), 'height'),
  ...styleMap(
    theme => ({
      touchable: { height: theme.grid * theme.touchableSize },
    }),
    'height',
  ),
};

const positionRules = {
  absolute: 'absolute',
  relative: 'relative',
  fixed: 'fixed',
};
export const position = styleMap(mapToStyleProperty(positionRules, 'position'));

const displayRules = {
  block: 'block',