How to use the @kiwicom/orbit-design-tokens.defaultTokens.spaceXXSmall function in @kiwicom/orbit-design-tokens

margin-bottom: ${defaultTokens.spaceLarge};
  border-radius: ${defaultTokens.borderRadiusLarge};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding-right: ${defaultTokens.spaceLarge};
`;

const IconImport = styled.div`
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  font-size: 12px;
  line-height: ${defaultTokens.lineHeightText};
  color: ${defaultTokens.paletteInkDark};
  background-color: ${defaultTokens.paletteCloudLight};
  border: ${defaultTokens.borderWidthCard} ${defaultTokens.borderStyleCard}
    ${defaultTokens.paletteCloudNormal};
  padding: ${defaultTokens.spaceXXSmall} ${defaultTokens.spaceXSmall};
`;

const IconList = () => (
  
    {Object.keys(Icons).map(icon => {
      const Icon = styled(Icons[icon])`
        padding: 0 ${defaultTokens.spaceLarge};
        flex-shrink: 0;
      `;
      const iconName = `${icon}`;
      return (
        
          
          
            {`import ${iconName} from "@kiwicom/orbit-components/lib/icons/${iconName}"`}

return (
    
  );
};

const styles = StyleSheet.create({
  container: {
    marginStart: 48,
    paddingVertical: parseInt(defaultTokens.spaceXXSmall, 10),
  },
});

export default createFragmentContainer(PassengersList, {
  data: graphql`
    fragment PassengersList_data on BookingInterface {
      passengers {
        id
        ...Passenger_data
      }
      bagInfo {
        type
        ...Bag_data
      }
    }
  `,

);
  }
}

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  container: {
    width: '100%',
    backgroundColor: defaultTokens.backgroundModal,
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: parseInt(defaultTokens.spaceXXSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
  },
  picker: {
    width: '100%',
  },
  confirmContainer: {
    marginHorizontal: parseInt(defaultTokens.spaceXSmall, 10),
  },
});

+target?: string,
  +onClick?: () => void,
|};
export default function Link({ children, href, target, onClick }: Props) {
  return (
    
  );
}

const Icon = styled.span`
  margin-right: ${defaultTokens.spaceXXSmall};
`;
const Text = styled.a`
  color: white;
  text-decoration: underline;
  font-size: ${defaultTokens.fontSizeButtonNormal};
  line-height: 44px;
  position: relative;
  left: -${defaultTokens.spaceXXSmall};
  &:hover {
    color: ${defaultTokens.paletteProductLight};
  }
`;

)}
    
  
);

const styles = StyleSheet.create({
  container: {
    web: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: parseInt(defaultTokens.spaceXXSmall, 10),
      height: 14,
    },
  },
  text: {
    fontSize: parseFloat(defaultTokens.fontSizeTextSmall),
    lineHeight: 17,
    padding: 5,
    web: {
      lineHeight: 14,
      padding: 0,
      color: defaultTokens.paletteInkLight,
    },
  },
});

export default createFragmentContainer(TripCities, {

);
}

const styles = StyleSheet.create({
  wrapperVisa: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingStart: parseInt(defaultTokens.spaceSmall, 10),
    paddingVertical: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  paddingTextLeft: {
    paddingStart: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  success: {
    backgroundColor: defaultTokens.backgroundBadgeSuccess,
  },
  critical: {
    backgroundColor: defaultTokens.backgroundBadgeCritical,
  },
});

style={styles.tag}
            onDeletePress={onDeletePress}
          >
            {tag}
          
        ))}
      
    );
  }
}

const styles = StyleSheet.create({
  tag: {
    alignSelf: 'center',
    marginVertical: parseFloat(defaultTokens.spaceXXXSmall),
    marginEnd: parseFloat(defaultTokens.spaceXXSmall),
  },
});

}

const styles = StyleSheet.create({
  container: {
    display: 'flex',
    flexDirection: 'column',
    marginTop: parseInt(defaultTokens.spaceSmall, 10),
  },
  dateFormWrapper: {
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  text: {
    marginStart: parseInt(defaultTokens.spaceSmall, 10),
    marginBottom: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  dayPickerWrapper: {
    flex: 0.2,
  },
  monthPickerWrapper: {
    flex: 0.4,
  },
  yearPickerWrapper: {
    flex: 0.3,
  },
});

return (
    
  );
}

const styles = StyleSheet.create({
  wrapperVisa: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingStart: parseInt(defaultTokens.spaceSmall, 10),
    paddingVertical: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  paddingTextLeft: {
    paddingStart: parseInt(defaultTokens.spaceXXSmall, 10),
  },
  success: {
    backgroundColor: defaultTokens.backgroundBadgeSuccess,
  },
  critical: {
    backgroundColor: defaultTokens.backgroundBadgeCritical,
  },
});

};

const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  modalCentered: {
    justifyContent: 'center',
  },
  content: {
    width: '100%',
    backgroundColor: defaultTokens.backgroundModal,
    borderTopStartRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    borderTopEndRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: parseInt(defaultTokens.spaceXXSmall, 10),
    paddingBottom: parseInt(defaultTokens.spaceXXLarge, 10),
  },
  contentCentered: {
    maxWidth: 520,
    borderRadius: parseInt(defaultTokens.borderRadiusLarge, 10),
    paddingTop: 0,
    paddingBottom: 0,
  },
});